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.
Simple
Motion's pick-up-and-play API is easy to start and fun to master.
Transforms
Animate every transform axis independently, without needing multiple elements.
Springs
Go beyond time-based animations with real spring physics for great-feeling animations.
Scroll
Motion uses browser APIs for hardware accelerated scroll-linked and scroll-triggered animations.
Exit animations
Motion for React makes it easier than ever to animate elements as they exit the DOM.
Layout animations
Animate between different layouts with Motion's industry-leading layout animation engine.
Gestures
Hover, press and drag gestures that feel native, not “webby”
Timeline
Variants, stagger and timelines make it easy to precisely orchestrate animations.
// 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 }} />
Simple
Motion's pick-up-and-play API is easy to start and fun to master.
Transforms
Animate every transform axis independently, without needing multiple elements.
Springs
Go beyond time-based animations with real spring physics for great-feeling animations.
Scroll
Motion uses browser APIs for hardware accelerated scroll-linked and scroll-triggered animations.
Exit animations
Motion for React makes it easier than ever to animate elements as they exit the DOM.
Layout animations
Animate between different layouts with Motion's industry-leading layout animation engine.
Gestures
Hover, press and drag gestures that feel native, not “webby”
Timeline
Variants, stagger and timelines make it easy to precisely orchestrate animations.
// 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 }} />
Simple
Motion One's pick-up-and-play API is easy to start and fun to master.
Transforms
Go beyond CSS by animating transforms on every axis.
Springs
Go beyond time-based animations with real spring physics for great-feeling animations.
Scroll
Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.
Exit animations
Motion One for React makes it easier than ever to animate elements as they exit the DOM.
Layout animations
Animate between different layouts with Motion One's industry-leading layout animation engine.
Gestures
Animate transforms on every axis independently, with full control over timing.
Timeline
Animate transforms on every axis independently, with full control over timing.
Simple
Motion One's pick-up-and-play API is easy to start and fun to master.
Transforms
Go beyond CSS by animating transforms on every axis.
Springs
Go beyond time-based animations with real spring physics for great-feeling animations.
Scroll
Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.
Exit animations
Motion One for React makes it easier than ever to animate elements as they exit the DOM.
Layout animations
Animate between different layouts with Motion One's industry-leading layout animation engine.
Gestures
Animate transforms on every axis independently, with full control over timing.
Timeline
Animate transforms on every axis independently, with full control over timing.
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
Cursor is the first of a series of creative React components that make it quick to level up your Motion.
All components are built in TypeScript and supported by a strong test suite. Exclusive for Motion+ members.
?
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.