framer-motion-layout
Official Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.
By c-jeril · 553 installs
npx skills add c-jeril/framer-motion-skills --skill framer-motion-layout
Source repository · Upstream listing
Framer Motion Layout Animations
When to Use This Skill
Apply when implementing shared element transitions, layout animations for reordering, or coordinated mount/unmount animations. When the user asks about Framer Motion layout animations, layoutId, or AnimatePresence.
Related skills: For core animation use framer motion core ; for variants use framer motion variants ; for React integration use framer motion react .
Layout Prop
The layout prop enables automatic position animations when layout changes:
Layout Modes
Mode Behavior
true Animate position and size
"position" Animate only position
"size" Animate only size
layoutId for Shared Element Transitions
layoutId enables smooth transitions between elements in different components:
Page Transitions
When CardA unmounts and CardB mounts with the same layoutId , Framer Motion animates the element smoothly between positions.
Modal Overlays
AnimatePresence for Layout
AnimatePresence enables exit animations:
AnimatePresence Modes
Mode Description
"sync" All animations run simultaneously (default)
"wait" Exit completes before enter starts
"popLayout" Exiting element removed from layout immediately
Reorderable Lists
Combine layout with drag for reorderable lists:
Shared Layout with Grid
Exit Animations
Elements must have exit states for AnimatePresence:
Exit with layout
Crossfade with layoutId
When multiple elements share a layoutId at the same level:
The element smoothly morphs between states including border radius.
Best practices
✅ Use layoutId for shared element transitions between routes/pages.
✅ Wrap animated lists with AnimatePresence for exit animations.
✅ Use layout prop for automatic position animations.
✅ Use AnimatePresence mode="popLayout" for smooth reordering.
✅ Define exit states for components using AnimatePresence.
✅ Use layout on parent containers when children need to animate position.
Do Not
❌ Forget to wrap conditionally rendered animated components with AnimatePresence.
❌ Use the same layoutId on multiple elements at the same level.
❌ Forget to define exit states for components that unmount.
❌ Use layout animations without proper keys on children.
❌ Animate too many layout elements simultaneously — group or stagger.
Learn More
https://www.framer.com/motion/layout animations/
https://www.framer.com/motion/animate presence/