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.
Animate provides animation patterns and best practices for Next.js and React applications, based on Emil Kowalski's "Animations on the Web" course. It offers comprehensive guidance for implementing smooth, performant, and accessible animations, transitions, hover effects, page transitions, modals, and other motion in React components, solving the common problem of animations that feel janky, inconsistent, or inaccessible.
The skill includes a quick-reference easing cheat sheet (for example ease-out at 200-300ms for entering elements, ease-in at 150-200ms for exiting elements, and ease at 150ms for hover effects), recommended CSS custom properties such as --ease-out-quint and --ease-in-out-cubic, and copy-ready patterns for hover lift effects, button presses, fade-in on mount, modals with exit animations via AnimatePresence, shared-layout tab indicators using layoutId, and staggered list animations with variants. It codifies golden rules: exits should be about 75% of enter duration, only animate transform and opacity because they are GPU-accelerated, 200-300ms is the sweet spot for most animations, always respect prefers-reduced-motion, and use springs for interruptible animations. A set of complete working examples lives in the examples/ directory (card-hover.tsx, toast-stacking.tsx, text-reveal.tsx, shared-layout.tsx, animate-height.tsx, multi-step-flow.tsx, feedback-popover.tsx, and app-store-card.tsx), and reference files cover easing and timing, CSS animations, Framer Motion, and performance and accessibility. A when-to-use-what table guides choosing between CSS transitions and Framer Motion features such as layout, layoutId, useScroll, variants, and drag gestures.
The skill targets front-end developers building animations in Next.js and React who want motion that is smooth, performant, and accessible. For the Framer Motion examples it requires installing dependencies with pnpm add framer-motion react-use-measure usehooks-ts. Simple hover effects are recommended as CSS-only, while enter/exit and shared-element transitions are recommended via Framer Motion.
Exit animations should be about 75% of enter duration, only animate transform and opacity (they are GPU-accelerated), keep most animations in the 200-300ms range, always respect prefers-reduced-motion, and use springs for interruptible animations.
The skill recommends CSS transitions for simple hover effects and performance-critical work, and Framer Motion for enter/exit animations (with AnimatePresence), layout changes (layout prop), shared element transitions (layoutId), scroll-linked animations (useScroll), complex orchestrated animations (variants), and drag interactions.
For the Framer Motion examples, install them with pnpm add framer-motion react-use-measure usehooks-ts.
The examples/ directory includes card-hover.tsx, toast-stacking.tsx, text-reveal.tsx, shared-layout.tsx, animate-height.tsx, multi-step-flow.tsx, feedback-popover.tsx, and app-store-card.tsx, each demonstrating specific techniques such as CSS transitions, layoutId shared layout, and AnimatePresence.
Yes. One of the golden rules is to always respect prefers-reduced-motion, and a dedicated references/performance-accessibility.md file covers 60fps optimization, prefers-reduced-motion, and accessibility.
Quick Setup:
.claude/skills/Repository
delphi-ai/animate-skill