Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course.

Next.js Animations Overview This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations. Quick Reference Easing Cheat Sheet Animation Type Easing Duration Element entering ease out 200 300ms Element moving on screen ease in out 200 300ms Element exiting ease in 150 200ms Hover effects ease 150ms Opacity only linear varies CSS Custom Properties (Recommended) Common Animation Patterns 1. Hover Lift Effect 2. Button Press 3. Fade In on Mount (Framer Motion) 4. Modal with Exit Animation 5. Tab Indicator (Shared Layout) 6. Staggered List Animation Golden Rules 1. Exits faster than enters : Exit animations should be ~75% of enter duration 2. Only animate transform and opacity : These are GPU accelerated 3. 200 300ms is the sweet spot : Most animations should be in this range 4. Always respect prefers reduced motion : See accessibility section in references 5. Use springs for interruptible animations : Better UX when users interrupt Examples Complete working examples from the course are in the examples/ directory: Example Description Key Techniques card hover.tsx Slide up description on hover CSS transitions, transform, opacity toast stacking.tsx Animated toast notifications CSS custom properties, data triggers text reveal.tsx Staggered letter animation @keyframes, animation delay, calc() shared layout.tsx Element position/size morph Framer Motion layoutId animate height.tsx Smooth height changes useMeasure, animate height multi step flow.tsx Directional step wizard AnimatePresence, custom variants feedback popover.tsx Button to popover expansion Nested layoutId, form states app store card.tsx iOS style card expansion Multiple layoutId elements To use an example, read it with: Read examples/<name .tsx References For detailed documentation, read the reference files: references/easing and timing.md Easing functions, timing guidelines, spring configuration references/css animations.md Transforms, transitions, keyframes, clip path references/framer motion.md Motion components, AnimatePresence, variants, layout animations, hooks references/performance accessibility.md 60fps optimization, prefers reduced motion, accessibility When to Use What Scenario Recommended Approach Simple hover effects CSS transitions Enter/exit animations Framer Motion + AnimatePresence Layout changes Framer Motion layout prop Shared element transitions Framer Motion layoutId Scroll linked animations Framer Motion useScroll Complex orchestrated animations Framer Motion variants Drag interactions Framer Motion drag gestures Performance critical CSS only with transforms Dependencies For Framer Motion examples, install: