Motion makes animation
Motion makes animation
Motion makes animation
simple, fun, and limitless.
simple, fun, and limitless.
simple, fun, and limitless.
Go beyond the browser with super smooth
Go beyond the browser with super smooth
Go beyond the browser with super smooth
springs, layout animations, timelines
springs, layout animations, timelines
springs, layout animations, timelines
and much, much more.
and much, much more.
and much, much more.
Free
Completely free to use and open-source under the MIT license.
Tiny
Mini
animateis 90% smaller than its GSAP equivalent,scroll75% smaller.Production-ready
Written in TypeScript, with extensive test coverage.
Hybrid engine
The power of JS animations with the performance of hardware acceleration.
Animate between different layouts with Motion's industry-leading layout animation engine.
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
Animate between different layouts with Motion's industry-leading layout animation engine.
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
// JavaScript
animate(".ball", { scale: 1.2 })
// React
<motion.div animate={{ scale: 1.2 }} />
Go beyond time-based animations with real spring physics for great-feeling animations.
Examples:
Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.
Examples:
Motion One for React makes it easier than ever to animate elements as they exit the DOM.
Examples:
Animate between different layouts with Motion One's industry-leading layout animation engine.
Examples:
Go beyond time-based animations with real spring physics for great-feeling animations.
Examples:
Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.
Examples:
Motion One for React makes it easier than ever to animate elements as they exit the DOM.
Examples:
Animate between different layouts with Motion One's industry-leading layout animation engine.
Examples:
Our Sponsors
Motion is made possible thanks to our amazing sponsors.
Our Sponsors
Motion is made possible thanks to our amazing sponsors.
Our Sponsors
Motion is made possible thanks to our amazing sponsors.
Courses
Motion for React has video and interactive courses built by the best educators in the world.
Premium components
Motion+ grants access to premium React components, starting with Cursor and AnimateNumber.
All components are built in TypeScript and supported by a strong test suite. Install via npm, with source access via our private Github repo.
Showcase
All the beautiful sites featured in the Framer gallery are powered by Motion.
Here are some more amazing interactions made by developers with its flexible APIs.