Preset Reference

These animate elements into view, typically on scroll. All use ScrollTrigger with a default start of "top 85%". Preset IDs: fade-in, fade-up, fade-down, fade-left, fade-right, slide-up, slide-down, slide-left, slide-right, scale-in, scale-up, scale-down, rotate-in, rotate-left, rotate-right, flip-x, flip-y, blur-in, blur-up, blur-down, clip-top, clip-bottom, clip-left, clip-right, clip-circle.

These combine multiple properties for richer effects. fade-up-scale combines fade + slide up + scale from 0.95x. fade-left-rotate combines fade + slide from left + rotation. blur-scale-up combines deblur + scale from 0.9x.

Use GSAP SplitText to split text and animate with stagger. Split by words: text-fade-up, text-fade-down. Split by lines (masked): text-slide-up, text-slide-down. Split by chars: text-rotate-in, text-blur-in, text-scale-in, text-wave. Special: typewriter (character-by-character typing), text-scramble (decode from random characters).

data-etch-motion="text-fade-up"
data-etch-motion-trigger="scroll"
data-etch-motion-split="words"
data-etch-motion-stagger="0.05"

Use ScrollTrigger scrub or pin for scroll-linked animations. Parallax: parallax, parallax-slow, parallax-fast, parallax-horizontal. Scrub: scrub-fade-in, scrub-slide-in, scrub-scale, scrub-rotate. Pinned: horizontal-scroll, scroll-sequence. Number: counter.

Respond to hover, click, or mouse movement. Simple hover: hover-lift, hover-scale, hover-scale-down, hover-underline, hover-background-slide, hover-border-draw. Cursor tracking: hover-tilt, hover-magnetic, hover-spotlight. Click: flip-expand, flip-layout. Special: cursor-follower. All hover effects are automatically disabled on touch devices.