Web Animations

Web Animations

FIRST PRINCIPLE: prefers-reduced-motion

Non-negotiable. Every animation must have a reduced-motion fallback.

Framer Motion: useReducedMotion() — set duration: 0 or remove movement. CSS: @media (prefers-reduced-motion: reduce) — disable or instant.

const reduce = useReducedMotion();
<motion.div
  initial={{ opacity: reduce ? 1 : 0, y: reduce ? 0 : 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: reduce ? 0 : 0.4 }}
/>

Reduced-Motion Fallback Map

Accessibility

• aria-live="polite" on containers with dynamic animated content (toasts, counters)
• aria-busy={isLoading} on skeleton/spinner containers
• Keyboard fallbacks on all draggable/interactive animated elements
• aria-expanded on accordion triggers

Ver references/accessibility-code.md para complete ARIA patterns, TypeScript types, error boundary, and ESLint config.

Decision Tree

What are you animating?
|
+-- Hover / focus / active?         -> CSS transition
+-- Looping (spinner, pulse)?       -> CSS @keyframes
+-- Page/route transition?          -> View Transitions API (fallback: AnimatePresence)
+-- Tied to scroll?                 -> CSS animation-timeline: scroll()/view()
+-- React mount/unmount?            -> Framer Motion AnimatePresence
+-- Layout shift (reorder, resize)? -> Framer Motion layout prop (FLIP)
+-- Gesture (drag, swipe)?          -> Framer Motion drag
+-- Orchestrated sequence (5+)?     -> GSAP timeline
+-- Imperative/programmatic?        -> WAAPI or useAnimation

Quick-Resolution Table

Anti-Patterns

See references/animation-patterns.md for extended anti-patterns with code examples.

Core Principles — 60fps

Animate only: transform (translate, scale, rotate, skew) and opacity Never animate: width, height, top, left, margin, padding, font-size Verify: Chrome DevTools > Rendering > Paint Flashing. Green = repainting.

Framer Motion vs CSS vs WAAPI

Motion Design Timing

Never exceed 700ms for UI animations.

Easing Tokens

:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

Quick-Start Cheatsheet

CSS hover: .card { transition: transform 150ms ease-out; } .card:hover { transform: scale(1.03); }

Fade-in on mount:

<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }} />

AnimatePresence exit:

<AnimatePresence>
  {visible && <motion.div exit={{ opacity: 0, y: -8 }}>...</motion.div>}
</AnimatePresence>

CSS spinner:

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 24px; height: 24px; border: 3px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite; }

Scroll progress: animation: grow linear both; animation-timeline: scroll(root);

staggerChildren:

const list = { visible: { transition: { staggerChildren: 0.08 } } };
const item = { hidden: { opacity: 0, y: 12 }, visible: { opacity: 1, y: 0 } };
<motion.ul variants={list} initial="hidden" animate="visible">
  {items.map(i => <motion.li key={i} variants={item} />)}
</motion.ul>

layoutId tab indicator:

{tabs.map(t => (
  <button key={t} => setActive(t)}>
    {t}
    {active === t && <motion.div layoutId="tab-indicator" className="indicator" />}
  </button>
))}

Install

npm install framer-motion    # React/Next.js
npm install gsap             # Optional: complex multi-step timelines only

CSS animations, View Transitions API, and scroll-driven animations require no installation.

Reference Files