Entrance & Exit Animations

beginner

Deep dive into the 28 entrance and combo presets — fade, slide, scale, rotate, blur, clip-path, and combinations.

How Entrance Animations Work

Every entrance preset follows the same pattern: an element starts in a hidden initial state (set via CSS) and animates to its final visible state when triggered. The initial state is applied by CSS generated by the Style Manager — for example, fade-up starts with opacity: 0; transform: translateY(30px). When ScrollTrigger detects the element entering the viewport, GSAP animates it to opacity: 1; transform: none. This prevents flash-of-unstyled-content.

If elements are permanently invisible, verify both data-etch-motion and data-etch-motion-trigger="scroll" attributes are present. The trigger attribute is required for ScrollTrigger to load.

Fade Presets

The most versatile family. fade-in is pure opacity, the most subtle. fade-up slides 30px upward — the workhorse choice for most content. fade-down drops from above, good for headers. fade-left and fade-right are horizontal, great for side-by-side layouts then being composed directionally.

data-etch-motion="fade-up"
data-etch-motion-trigger="scroll"
data-etch-motion-duration="1.2"
data-etch-motion-delay="0.2"

Slide, Scale, Rotate & Flip

Slide presets (slide-up/down/left/right) travel 60px vs 30px for fades — more dramatic, no opacity change during movement. Scale presets: scale-in (subtle 0.8x), scale-up (dramatic 0.5x), scale-down (from 1.2x settling). Rotate presets: rotate-in (10deg tilt), rotate-left (-15deg with -30px slide), rotate-right (mirror). Flip presets: flip-x and flip-y use 3D perspective rotation with backface-visibility hidden.

Blur & Clip-Path Presets

Blur presets create a camera focus-pull effect. blur-in is pure blur (10px to 0), blur-up adds upward slide, blur-down adds downward slide. Clip-path presets are the most dramatic reveals. clip-top/bottom/left/right use CSS inset clips for wipe reveals. clip-circle expands from center outward. These have the highest visual impact.

data-etch-motion="clip-circle"
data-etch-motion-trigger="scroll"
data-etch-motion-duration="1.0"

Combo Presets

Three presets combine multiple properties: fade-up-scale (fade + 30px slide + 0.95x scale), fade-left-rotate (fade + left slide + -5deg rotation), blur-scale-up (deblur 8px + 0.9x scale). These create richer, more polished effects.

Staggering Groups

To stagger a group (like cards in a grid), add stagger and target attributes on the parent. Each child gets the same preset. When 3+ identical presets appear together, Etch Motion automatically uses ScrollTrigger.batch() for better performance.

<!-- Parent -->
data-etch-motion-stagger="0.1"
data-etch-motion-target=".card"

<!-- Each child -->
data-etch-motion="fade-up"
data-etch-motion-trigger="scroll"