How it works
You swap a div for motion.div and describe states: initial, animate and exit values, plus a transition such as a spring. Motion handles the rest, including gestures (hover, tap, drag), scroll-linked effects and layout animations that smoothly move elements when the page rearranges. AnimatePresence animates components as they leave the page.
Created at Framer, the library became independent in late 2024 and was renamed Motion; new code imports from motion/react, and it also works with plain JavaScript and Vue. It uses the browser's hardware-accelerated animation engine where it can. The library is MIT-licensed; Motion+ is an optional paid pack of premium components and examples.
Framer Motion pros and cons
Pros
- Declarative API that reads naturally in React components
- Layout and exit animations that are hard to do by hand
- Physics-based springs make movement feel natural
- Gestures and scroll effects built in
Cons
- Adds noticeable JavaScript to the bundle
- Long, choreographed sequences are easier to build in GSAP
- The rename means older guides still import from framer-motion
When to use Framer Motion
Pick it when
- React interfaces that need polished transitions and micro-interactions
- Page, modal and list animations with enter and exit states
- Drag, swipe and other gesture-driven components
Skip it when
- Simple hover or fade effects that plain CSS transitions handle
- Complex scroll-driven storytelling, where GSAP fits better
Framer Motion pricing
Open source
Free (MIT). Motion+, an optional pack of premium components and examples, is a one-time payment of about £299 for one person; team seats are billed yearly.
Framer Motion pricing page (opens in a new tab)Approximate, checked September 2026.What the other tools cost
Framer Motion vs the alternatives
Related terms
More in Frontend
Motion