Motion Recipes

Text lines and panels reveal from below the baseline using clip-path animations with Motion One.

Elements fade and rise into view as they enter the viewport using GSAP ScrollTrigger.

Elements fade and rise into view using Motion's inView() and stagger() — driven by the Web Animations API, no external runtime.

Five-phase entrance sequence: eyebrow → headline → body → items → CTA. Each element enters on a calculated offset so the section reads as a single choreographed motion.

Child elements animate into view one after another when their parent container enters the viewport.

Each word clips behind an overflow-hidden wrapper and translates up from 115% — creates the editorial effect of text rising from below the baseline.

Scroll-progress-driven clip-path reveal that wipes between two stacked layers — a wireframe and a design mockup — as the user scrolls.

Reading progress bar, parallax layer, and entrance cards — scroll() drives a progress callback, inView() + animate() handles reveals.

A button that morphs through three states — idle, loading (spinner), success (checkmark) — without layout shift. Motion One animates the width collapse and color transition.

Bottom sheet that opens with spring easing and snaps closed when dragged past a threshold. Pointer capture tracks drag on the handle. Backdrop fades proportional to drag progress.

Validation error triggers a horizontal spring shake — a physical rejection metaphor. The oscillation uses Motion One's keyframe array with 8 x-values that dampen to zero.

Toast notifications spring in from the bottom-right using elastic overshoot. A shrinking progress bar drives auto-dismiss after 4 seconds. Pause on hover. Stack up to 4.

Animated tab indicator that slides to the active tab using Motion One — two variants: an underline bar and a floating pill. Content panels fade and rise on switch.