motion

Original：🇺🇸 English
Translated

Web animations with Motion (formerly Framer Motion) for React -- gestures, scroll effects, spring physics, layout animations, SVG, micro-interactions, loading states. Use when: drag-and-drop, scroll animations, modals, carousels, parallax, page transitions, hover effects, staggered lists, loading spinners, number counters. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client", layout in scaled containers.

12installs
Sourceoakoss/agent-skills
Added on

NPX Install

npx skill4agent add oakoss/agent-skills motion

Tags

Translated version includes tags in frontmatter
motion-reactweb-animationsreact-animation-librarynextjs-integrationperformance-optimization

SKILL.md Content

View Translation Comparison →

Motion

Overview

Motion (package: 
motion
, formerly 
framer-motion
) is the standard React animation library. Import from 
motion/react
. Provides declarative props for gestures, scroll-linked animations, layout transitions, SVG path drawing, and spring physics. Uses a hybrid animation engine (WAAPI for transforms/opacity, ScrollTimeline for scroll-linked effects). Bundle ranges from 2.3 KB (useAnimate mini) to 34 KB (full), optimizable to 4.6 KB with LazyMotion. Compatible with React 18.2+, React 19, Next.js App Router, and Vite.
Do NOT use Motion for simple list add/remove animations (use AutoAnimate instead at 3.28 KB). Do NOT use for 3D (use Three.js / React Three Fiber).

Quick Reference

PatternAPI / Props
Fade in on mount
initial
, 
animate
, 
transition
Exit animations
AnimatePresence
+ 
exit
prop (unique 
key
required)
Staggered list
variants
with 
staggerChildren
Hover / tap / focus
whileHover
, 
whileTap
, 
whileFocus
Drag
drag
, 
dragConstraints
, 
dragElastic
Scroll-triggered
whileInView
, 
viewport={{ once: true }}
Scroll-linked/parallax
useScroll
+ 
useTransform
Progress indicator
scrollYProgress
+ 
scaleX
Layout animation
layout
prop (FLIP technique)
Shared element
layoutId
(same ID across views)
Layout group
LayoutGroup
wrapping sibling lists
Page transition
AnimatePresence
+ 
key={pathname}
SVG path drawing
pathLength
on 
motion.path
Animated counter
useSpring
+ 
useTransform
Imperative control
useAnimate
hook returns 
[scope, animate]
Custom components
motion.create(Component)
wraps any component
Bundle optimization
LazyMotion
+ 
domAnimation
+ 
m
component (4.6 KB)
Reduced motion
MotionConfig reducedMotion="user"

Common Mistakes

MistakeCorrect Pattern
AnimatePresence inside a conditionalKeep AnimatePresence mounted; place conditional content inside it
Missing unique 
key
on AnimatePresence children		Add unique 
key
to each direct child for exit animations
Tailwind 
transition-*
classes with Motion animate props		Remove Tailwind transition classes to avoid stuttering
Importing from 
framer-motion
Use 
import { motion } from "motion/react"
(renamed late 2024)
Animating 50+ items without virtualizationUse react-window or @tanstack/react-virtual for large lists
Full 34 KB bundle for simple animationsUse LazyMotion + domAnimation (4.6 KB) or useAnimate (2.3 KB)
Missing 
"use client"
in Next.js App Router		Add directive or use 
motion/react-client
import
Animating 
width
/
height
directly		Use 
layout
prop or 
transform: scale
for GPU acceleration
No 
prefers-reduced-motion
handling		Wrap app in 
MotionConfig reducedMotion="user"

Delegation

  • Audit animation performance and bundle size: Use 
    Explore
    agent to find heavy imports, missing LazyMotion, and reflow-triggering properties
  • Build complex multi-step animations: Use 
    Task
    agent for scroll-linked parallax, shared layout transitions, and staggered sequences
  • Plan animation architecture for a new project: Use 
    Plan
    agent to evaluate Motion vs AutoAnimate vs CSS-only based on requirements
If the 
design-system
skill is available, delegate animation token definitions and motion design guidelines to it.

References

  • Core Patterns -- Animation patterns: fade, exit, stagger, gestures, modal, accordion, tabs, scroll, layout, drag, SVG, loading
  • Scroll Animations -- useScroll, useTransform, scroll-triggered, parallax, progress indicators, offset configuration
  • Performance -- LazyMotion, useAnimate, hardware acceleration, virtualization, production checklist
  • Next.js Integration -- App Router patterns, motion/react-client, Pages Router, known issues
  • Accessibility & CSS -- prefers-reduced-motion, MotionConfig, useReducedMotion, CSS keyframes, Tailwind animations
  • Library Selection Guide -- Motion vs AutoAnimate decision guide with feature comparison and use-case recommendations
  • Troubleshooting -- AnimatePresence bugs, Tailwind conflicts, layout glitches, React 19 issues, naming migration