𝗠𝗼𝘁𝗶𝗼𝗻 𝗶𝗻 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻: 𝗟𝗮𝘆𝗼𝘂𝘁 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀
Framer-motion has changed. Since late 2024, the package is now called Motion. You must use the motion/react import path.
Most tutorials are outdated. They still show old imports and lack accessibility. This guide helps you use modern Motion in real projects.
𝗧𝗵𝗲 𝗨𝗽𝗴𝗿𝗮𝗱𝗲
The transition is simple. If you use version 11, version 12 is a find-and-replace task.
- Uninstall: npm uninstall framer-motion
- Install: npm install motion
- Update imports: Change 'framer-motion' to 'motion/react'
You can run both packages together during a migration. Do not let them stay in your codebase forever.
𝗟𝗮𝘆𝗼𝘂𝘁 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻𝘀
The layout prop tells Motion to watch an element's size and position. It animates changes instead of letting the browser snap to new spots.
Use layout="position" for lists. This moves siblings when an item grows but does not squash the content inside.
Use AnimatePresence for mounting and unmounting. Without it, React removes elements from the DOM before they can animate out.
Avoid animating height: auto. It causes visual glitches. Instead, use a CSS grid wrapper (0fr to 1fr) for smooth height changes.
𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆
About 30% of iOS users enable prefers-reduced-motion. Do not just turn off all animations. This breaks your layout.
The wrong way: Replace <motion.div> with a plain
The right way: Gate the transition, not the component. Keep the <motion.div> but set the duration to 0.
Create a custom hook to manage this:
- Use the useReducedMotion hook.
- If true, return a duration of 0.
- If false, return your standard spring settings.
This ensures elements still reach their correct positions without the movement.
𝗪𝗵𝗲𝗻 𝘁𝗼 𝘂𝘀𝗲 𝗠𝗼𝘁𝗶𝗼𝗻
Use the browser Web Animations API for simple fades. It has zero dependencies.
Use Motion when you need:
- React-native APIs that understand component lifecycles.
- Layout animations that track DOM changes.
- AnimatePresence for exit animations.
- Spring physics that feel natural.