Scroll Animations

intermediate

Parallax, scrub, horizontal scroll, scroll sequences, and counter animations.

Parallax

Creates depth by moving elements at different speeds relative to scroll. parallax (speed -0.3, moderate), parallax-slow (speed -0.15, subtle), parallax-fast (speed -0.5, aggressive), parallax-horizontal (horizontal shift). All use ScrollTrigger scrub spanning the full element journey.

data-etch-motion="parallax"
data-etch-motion-trigger="scroll"
data-etch-motion-parallax-speed="-0.3"

Use parallax on decorative/background elements, not content that affects page flow. Avoid layout shift.

Scrub Animations

Link animation progress directly to scroll position. scrub-fade-in (opacity 0→1), scrub-slide-in (position -100px→0), scrub-scale (0.8x→1), scrub-rotate (-15deg→15deg). The scrub value controls smoothness: true = instant snap, 0.5 = smooth half-second catchup, 1 = one-second catchup.

data-etch-motion="scrub-fade-in"
data-etch-motion-trigger="scroll"
data-etch-motion-scroll-scrub="0.5"
data-etch-motion-scroll-start="top 80%"
data-etch-motion-scroll-end="top 30%"

Horizontal Scroll & Sequences

horizontal-scroll pins a section and scrolls content horizontally while the user scrolls vertically. Total distance auto-calculated from content width. scroll-sequence pins a section and cycles through content steps on scroll. Both use ScrollTrigger pin.

data-etch-motion="horizontal-scroll"
data-etch-motion-trigger="scroll"
data-etch-motion-scroll-pin="true"

Use data-etch-motion-disabled="768" to disable horizontal scroll below tablet width.

Counter

Animates a number from start to end value when triggered on scroll. Supports prefix ($), suffix (%, +), and decimal places. Uses GSAP snap for clean integer display.

data-etch-motion="counter"
data-etch-motion-trigger="scroll"
data-etch-motion-counter-start="0"
data-etch-motion-counter-end="2500"
data-etch-motion-counter-prefix="$"
data-etch-motion-duration="2"