Motion For The Web

Learn why subtle motion matters. Use animation to show cause, reinforce hierarchy, and create natural, clear UI transitions.

Use prefers-reduced-motion to respect users' motion preferences—implement a subtle default pulse and an optional energetic 'party' animation.

Load animation styles only when motion's allowed via link media='(prefers-reduced-motion: no-preference)', keeping sites lightweight and accessible.

Use window.matchMedia to detect prefers-reduced-motion in real time and update app behavior instantly—no page reload needed.

Learn why animating transform and opacity gives smooth GPU-accelerated motion, while animating layout properties causes jank—practical performance tips.

Master CSS transitions—control duration and properties, combine effects, handle hovers, and define transitions on base elements for smooth motion.

Master transition-timing-function: learn ease-in/out, visualize easing curves, and craft custom cubic-bezier easings for expressive CSS motion.

Combine custom easings per property to layer rotation, color, and border-radius; use steps() and Open Props presets for playful, expressive motion.

Master transition shorthand and delay to stagger effects, chain per-property transitions, and precisely control timing in one clean rule.

Learn CSS enter/leave transitions with transition-behavior and @starting-style—create smooth, declarative popover motion (no JavaScript needed).

Learn CSS @keyframes and animation—create keyframe animations, control duration, iterations, direction, and timing for smooth motion.

Master intermediate CSS @keyframes: choreograph multi-step animations, freeze frames, and layer transforms for expressive, story-like motion.

Master animation-fill-mode to keep end states, add staggered delays, reverse motion, and stop flickers—make CSS animations behave predictably.

Animate elements along custom paths with offset-path - no JS. Follow SVG paths from Figma, reuse shapes with CSS variables, and animate via clip-path.

Use CSS animation-timeline with view() to trigger fade and scale as elements enter the viewport, define custom ranges, and skip JavaScript.

Sync animations to scroll with CSS scroll(): create scroll-driven progress bars, target containers, and smooth, declarative motion without JS.

Use the View Transitions API: add @view-transition navigation: auto for automatic page crossfades and element morphs—make reloads feel like SPAs.

Generate unique view-transition names per item to enable smooth list-to-post page animations and polished nav underline transitions.

Go beyond CSS - discover JavaScript animation: interactive gestures, physics-based motion, and when to reach for GSAP, Anime.js, or Motion.

Learn JS animation loops: use setInterval to animate a square, calculate smooth 60FPS timing, and stop cleanly with clearInterval.

Use requestAnimationFrame to sync animation with display refresh, save CPU/battery, prevent skipped frames, and ensure smooth motion.

Animate with the Web Animations API: define keyframes in JS, control easing, offsets, iterations, and choreograph complex sequences declaratively.

Control Web Animations with play, pause, reverse and UI buttons—turn keyframes into interactive experiences using the Web Animations API.

Scrub animation timelines with a range slider - use currentTime and getTiming to sync real-time playback for precise, interactive control.

Read live animation progress via getComputedTiming(), sync updates with requestAnimationFrame, and display precise percent for reactive UI.

Animate SVG paths to appear hand-drawn using stroke-dasharray/offset—measure path length, handle rounded caps, and reveal with pure CSS.

Create an organic SVG loading spinner with CSS keyframes, animate stroke-dasharray, rotation, easing, and offsets for smooth, lively motion.

Explore JS animation libraries - GSAP, Anime.js, Motion.dev - compare syntax, performance and uses, and when to pick a library vs Web Animations API.

Discover Motion.dev, a lightweight, framework-agnostic animation toolkit with spring physics, staggered transitions, and blazing performance.

Rebuild Web Animations with Motion.dev's terse API—one-line animations, smart defaults, springy easing and easy sequencing for pro motion.

Use Motion.dev springs to craft realistic, physics-based motion, tune stiffness, damping, velocity for snappy to soft animations and natural feel.

Orchestrate multi-step Motion.dev sequences - chain selectors, timing, and per-step spring settings to build expressive, lively animations quickly.

Make Motion.dev animations interactive: use hover() to pause/resume, add scale/rotation effects, and create tactile, physics-aware hover responses.

Discover Anime.js: an approachable, powerful animation engine—staggering, SVG, timelines, CSS variable animation and live demos to learn fast.

Build an Anime.js draggable that snaps to a 64px grid—use createDraggable, tweak drag physics, springy release easing, bounds and modifiers.

Extend Anime.js draggables with modifiers, callbacks, relative rotations, and spring easing for precise, bouncy, interactive motion control.

Discover GSAP - learn core concepts, plugins, timelines, and scroll triggers to create professional, high-performance web animations.

Master GSAP timelines to sequence and label tweens, control progress, and orchestrate complex, predictable animations with ease.

Learn GSAP ScrollTrigger to sync animations with scroll: set triggers, use toggle actions, and debug markers for smooth, cinematic motion.

Master GSAP ScrollTrigger scrub - tie animation to scroll for smooth, responsive parallax with easing, inertia, and polished motion.

Master GSAP ScrollSmoother to add buttery-smooth, accessible scroll inertia—set structure, tweak smoothing/easing, and elevate your site's motion.

Create silky, lightweight parallax with GSAP ScrollSmoother—use simple data-speed/data-lag or auto mode to build layered, natural motion fast.

Master web motion: progress from CSS to Canvas/WebGL, SVG, and JS animations—learn when to step up tools for smooth, accessible effects.