דילוג לתוכן הראשי
Overview|Storytelling|Entrances|Depth on Scroll|WOW|Section Transitions|Page Transitions|Loaders|Mouse & Hover|Infrastructure|How it works
While scrolling💥 OV 2-4

Depth on Scroll

דברים שזזים עם הגלילה, צמודים אליה כל הדרך, ונותנים לדף עומק: תמונה בתוך המסגרת שלה, בלוקים במהירויות שונות, קנה מידה שגדל, שורה שנעה לרוחב, תג שמסתובב. תנועה אחת לכל אלמנט: תמונה שיש לה כניסה לא מקבלת גם פרלקס.

ParallaxImagedata-movementdata-movement-trackdata-shade-overlaydata-scaleScrollingTextUkCircleTextUkTrackerLottie_Scroll

#gsap-parallax-image

ParallaxImage

<Component />While scrolling
VariableDesktopPhoneWhat it does
--uk-parallax-shift104The intensity: how far the picture travels (GSAP yPercent, from −shift to +shift). Bigger = more movement.
--uk-parallax-overflow150%120%The picture's height as a % of the frame: the spare picture it travels through.
--uk-parallax-offset25%10%How far above the frame the picture starts.
<ParallaxImage src="/a.jpg" className="aspect-4/3" />

// stronger: the tunables in style, not a Tailwind class (the component's CSS is unlayered, it beats utilities)
// overflow ≥ 100% + 2 × offset, or an empty strip shows at the ends · style applies on phones too
<ParallaxImage
  src="/b.jpg"
  className="aspect-4/3"
  style={{ '--uk-parallax-shift': 20, '--uk-parallax-overflow': '180%', '--uk-parallax-offset': '40%' } as React.CSSProperties}
/>
Parallax demo, default

default (shift 10)

Parallax demo, stronger

stronger (shift 20, overflow 180%, offset 40%)

#gsap-movement

data-movement

[attribute]While scrolling

The whole mechanism is where the element is in the flow. from: it starts away from its place and lands on it, so the end is the layout. to: it starts on its place and moves away from it (parallax). Then only when: with the scroll, or once as it comes into view.

AttributeValuesWhile scrollingInto viewWhat it does
data-movementN (px)✓✓How far it moves while it crosses the screen. Negative = up (or left with axis x).
data-movement-typeto (default) · from✓to: from 0 to N, the whole way across the screen (parallax). from: from N to 0, landing early, so it is still by the time it is read. from while scrolling is a micro move only, up to ~80 (a list row, a heading); a big one is a to, or an enter.
data-movement-typeenter✓Rare: this attribute is a scroll one. The from move played once as it comes into view (0.9s), not tied to the scroll: N to 0, any distance, so it lands on its place in the layout.
data-movement-axisy (default) · x✓✓x: sideways. With from, a heading that slides to its place, landing at the middle of the screen.
data-movement-trackon a wrapper✓A tall track (--uk-movement-track, 300svh) whose first child sticks: every data-movement inside runs over the whole hold, not its own pass. A held scene of layers (KILN). It also publishes --uk-movement-track-p, 0 to 1 over the hold: #gsap-movement-track.
data-movement-opacitytrue✓✓With from or enter: fades in on the way.
data-movement-mobiletrue✓✓The full distance on a phone too (otherwise half under 768px).
#1-60toALL SCREENS
#2-120to
#360from
#4-400from

A list that arrives with the scroll

<div data-movement="80" data-movement-type="from" data-movement-opacity="true">…</div>   {/* every row */}
01.

פגישת היכרות

מבינים את העסק ואת מי שישתמש באתר

שבוע 1
02.

אפיון ועיצוב

מבנה, מסכים ושפה חזותית

שבועות 2-3
03.

פיתוח

בונים, מחברים ובודקים בכל מסך

שבועות 4-6
04.

עלייה לאוויר

העברה, הדרכה וליווי אחרי ההשקה

שבוע 7

היכל הקסדות

<h2 data-movement="80" data-movement-type="from" data-movement-axis="x">…</h2>

קולקציית הפודיום

<h2 data-movement="70" data-movement-type="enter">…</h2>

Images moving inside a frame

<div className="uk-image-columns"><div className="uk-image-columns__grid">
  <div className="uk-image-columns__col is-side" data-movement="200" data-movement-mobile="true">…</div>
  <div className="uk-image-columns__col" data-movement="-250" data-movement-mobile="true">…</div>
  <div className="uk-image-columns__col is-side" data-movement="200" data-movement-mobile="true">…</div>
</div></div>

The wall turns

<div className="uk-image-columns__grid" data-scroll-rotate="-10" data-scale="1.25">…</div>

The wall turns, shaded

<div className="uk-image-columns" data-shade-overlay="dark" data-shade-overlay-from="0.45" data-shade-overlay-to="0.85">
  <div className="uk-image-columns__grid" data-scroll-rotate="-10" data-scale="1.25">…</div>
  <h2>…</h2>   {/* above the layer: position relative + z-index 6 */}
</div>

ארכיון

#gsap-movement-track

data-movement-track

[attribute]While scrolling

התנועה כאן לא GSAP: GSAP רק מודד את הגלילה וכותב מספר, ו-CSS מזיז.

הגלילה נותנת מספר אחד, מ-0 ל-1, כל עוד הסצנה מוחזקת (data-movement-track). כל דבר בסצנה קורא חלק משלו מהמספר. בדוגמה: A זז בשליש הראשון של הגלילה, B בשליש השני, C בשליש השלישי. שורת CSS לכל אחד, בלי ציר זמן ובלי JS.

<!-- HTML: what you write -->
<div data-movement-track>
  <div>
    <span class="cube a">A</span> <span class="cube b">B</span> <span class="cube c">C</span>
  </div>
</div>

/* CSS: what you write. The kit gives the number, --uk-movement-track-p, 0 → 1 over the whole hold;
   --part is each cube's own share of it, 0 → 1 over its third */
.a { --part: clamp(0, var(--uk-movement-track-p) / 0.33, 1); }            /* 0 → 1 over the first third */
.b { --part: clamp(0, (var(--uk-movement-track-p) - 0.33) / 0.33, 1); }   /* the second */
.c { --part: clamp(0, (var(--uk-movement-track-p) - 0.66) / 0.34, 1); }   /* the third */
.cube { translate: 0 calc((1 - var(--part)) * 80px); opacity: calc(0.2 + var(--part) * 0.8); }

/* For comparison only, NOT used: the same three steps as a GSAP timeline would be
   gsap.timeline({ scrollTrigger: { trigger: '.track', start: 'top top', end: 'bottom bottom', scrub: true } })
     .from('.a', { y: 80, opacity: 0.2 })
     .from('.b', { y: 80, opacity: 0.2 })
     .from('.c', { y: 80, opacity: 0.2 });
*/

ועוד דוגמה: המסגרת של Cobalto

אותו מספר, יותר חלקים: כותרת שיוצאת ב-40% הראשונים, שמונה קווים שנסגרים כל אחד קצת אחרי הקודם, ומספר שרץ. מספר על המסך: משתנה שרשום כמספר שלם מעגל אותו, ומונה של CSS מדפיס אותו.

/* eased: smoothstep is plain arithmetic */
--e: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));

/* a number on screen */
@property --n { syntax: '<integer>'; inherits: true; initial-value: 0; }
--n: calc(var(--uk-movement-track-p) * 100);  counter-reset: n var(--n);  content: counter(n);

כותרת שיוצאת ב-40% הראשונים

#gsap-shade-h

data-shade-overlay

[attribute]While scrolling

שימושי לחשיפת פוטר מלמטה: הפוטר מחכה מתחת (uk-uncover), מתבהר כשהוא נחשף (enter), והתוכן שלו עולה למקומו (data-movement from). OV 1: משפיע ממש בקטנה, אז משתלב עם כל אפקט. דוגמאות נוספות בהמשך.

<section data-shade-overlay="dark">…</section>                          {/* darkens as it leaves the top */}
<section data-shade-overlay="light" data-shade-overlay-to="0.8">…</section>
<section data-shade-overlay="dark" data-shade-overlay-from="0.45" data-shade-overlay-to="0.85">…</section>  {/* a background from the first frame */}
<section data-shade-overlay="#efe4d2" data-shade-overlay-on="enter">…</section>  {/* starts in the colour, clears as it is uncovered (uk-uncover) */}

והסקשן הבא עולה מעליה

#gsap-scale

data-scale

[attribute]While scrolling
<div data-scale="1.15">…</div>           {/* 1 → 1.15 while it crosses the screen · grow 1.05–1.2 · shrink 0.85–0.95 */}
<div data-scale="exit">…</div>           {/* only on the way out: to 0.9, dims to 0.5 */}
<div data-scroll-rotate="360">…</div>    {/* turns 360° while it crosses the screen */}
#11.05subtle grow
#21.15gentle zoom
#31.3strong zoom
#40.85shrink

#gsap-scrolling-text

ScrollingText

<Component />While scrolling
<ScrollingText direction="forward">…</ScrollingText>              {/* moves left */}
<ScrollingText direction="backward" repeat={2}>…</ScrollingText>   {/* moves right, content twice */}
<ScrollingText speed={0.3}>…</ScrollingText>                       {/* slower than the scroll (default 1) */}
Inspiring With Design.   Inspiring With Design.   Inspiring With Design.  
Empowering Through Technology.   Empowering Through Technology.   Empowering Through Technology.  

#gsap-circle-text

UkCircleText

<Component />While scrolling
<div className="uk-circle-text">
  <svg data-scroll-rotate="360">…the text on a ring…</svg>   {/* the whole effect */}
  …rest of the code
</div>

<span data-scroll-rotate="360">★</span>   {/* a star turns the same */}
<UkCircleText text="• OUR TEAM • OUR TEAM • OUR TEAM • OUR TEAM ">↓</UkCircleText>
<UkCircleText text="• דברו איתנו • דברו איתנו • דברו איתנו " size={120} rotate={-360} />

הצוות שלנו.

#gsap-tracker

UkTracker

<Component />While scrolling

כמה נשאר. כל דבר סטיקי יש לו התקדמות למדוד, אז מנגנון אחד ומראות שונים, שמתחברים לכל אנימציה רק דרך האלמנט שלה. ברירת המחדל היא ההחזקה של סטיקי: מהרגע שהראש שלו בראש המסך ועד שהרגל שלו ברגל המסך. כאן כל הארבעה מודדים את הסקשן הזה עובר במסך.

look="ring" הטבעת: עיגול שמתמלא, בפינה של סצנה

look="ruler" הסרגל: שנתות וסמן שרץ (Cobalto)

look="count" המונה: הפרק, קו, הפרק האחרון (VELUNE)

look="dots" הנקודות: נקודה לכל שלב, מתמלאת כשהקו מגיע

<UkTracker target="#steps" />                                   // the ring, over a sticky's hold
<UkTracker target=".hero-track" look="ruler" />
<UkTracker target="#journey" look="count" steps={[0, 0.15, 0.34, 0.61, 0.82]} />   // where each chapter starts
<UkTracker target="#journey" look="dots" steps={5} vertical />
<UkTracker target="#steps" start="top 80%" end="bottom bottom" />                 // any range, ScrollTrigger's words
/* --uk-tracker-p (0 → 1, on itself) · --uk-tracker-accent · --uk-tracker-color · --uk-tracker-size · --uk-tracker-step */

#gsap-lottie-scroll

Lottie_Scroll

<Component />While scrolling

Basic usage

<div style={{ width: 400, height: 400 }}>
  <Lottie_Scroll src="..." />
</div>

Props

src
Lottie URL (.lottie or .json)
start?
ScrollTrigger start. Default: "top 80%"
end?
ScrollTrigger end. Default: "bottom 20%"
scrub?
Lag in seconds. Default: 1.5

Live demo: scroll to animate