Get started with Motion for React
Motion for React is a React animation library for building smooth, production-grade UI animations. You can start with simple prop-based animations before growing to layout, gesture and scroll animations.
Motion's unique hybrid engine combines the performance of native browser animations with the flexibility of JavaScript.
It's also trusted by companies like Framer and Figma to power their amazing no-code animations and gestures.
In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features.
Install
Motion is available via npm:
npm install motion
Features can now be imported via "motion/react"
:
import { motion } from "motion/react"
Your first animation
The <motion />
component is the core API in Motion for React. It's a DOM element, supercharged with animation capabilities.
<motion.ul animate={{ rotate: 360 }} />
When values in animate
change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via the transition
prop.
<motion.div animate={{ scale: 2, transition: { duration: 2 } }} />
Learn more about React animation
Enter animation
When a component enters the page, it will automatically animate to the values defined in the animate
prop.
You can provide values to animate from via the initial
prop (otherwise these will be read from the DOM).
<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />
Or disable this initial animation entirely by setting initial
to false
.
<motion.button initial={false} animate={{ scale: 1 }} />
Hover & tap animation
<motion />
extends React's event system with powerful gesture animations. It currently supports hover, tap, focus, and drag.
<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} onHoverStart={() => console.log('hover started!')} />
Motion's gestures are designed to feel better than using CSS or JavaScript events alone.
Scroll animation
Motion supports both types of scroll animations: Scroll-triggered and scroll-linked.
To trigger an animation on scroll, the whileInView
prop defines a state to animate to/from when an element enters/leaves the viewport:
<motion.div initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} />
Whereas to link a value directly to scroll position, it's possible to use MotionValue
s via useScroll
.
const { scrollYProgress } = useScroll() return <motion.div style={{ scaleX: scrollYProgress }} />
Layout animation
Motion has an industry-leading layout animation engine that supports animating between changes in layout using transforms.
It's as easy as applying the layout
prop.
<motion.div layout />
Or to animate between completely different elements, a layoutId
:
<motion.div layoutId="underline" />
Exit animations
By wrapping motion
components with <AnimatePresence>
we gain access to exit animations. This allows us to animate elements as they're removed from the DOM.
<AnimatePresence> {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null} </AnimatePresence>
Development tools
Motion provides developer tools to enhance your animation development experience, like loading your LLM with the latest Motion documentation, and visual bezier curve editors in VS Code.


Learn next
That's a very quick overview of Motion for React's basic features. But there's a lot more to learn!
Next, we recommend starting with the React animation guide. Here, you'll learn more about the different types of animations you can build with Motion.
Or, you can learn by doing, diving straight into our collection of Fundamentals examples. Each comes complete with full source code that you can copy-paste into your project.
Motion for React is a React animation library for building smooth, production-grade UI animations. You can start with simple prop-based animations before growing to layout, gesture and scroll animations.
Motion's unique hybrid engine combines the performance of native browser animations with the flexibility of JavaScript.
It's also trusted by companies like Framer and Figma to power their amazing no-code animations and gestures.
In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features.
Install
Motion is available via npm:
npm install motion
Features can now be imported via "motion/react"
:
import { motion } from "motion/react"
Your first animation
The <motion />
component is the core API in Motion for React. It's a DOM element, supercharged with animation capabilities.
<motion.ul animate={{ rotate: 360 }} />
When values in animate
change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via the transition
prop.
<motion.div animate={{ scale: 2, transition: { duration: 2 } }} />
Learn more about React animation
Enter animation
When a component enters the page, it will automatically animate to the values defined in the animate
prop.
You can provide values to animate from via the initial
prop (otherwise these will be read from the DOM).
<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />
Or disable this initial animation entirely by setting initial
to false
.
<motion.button initial={false} animate={{ scale: 1 }} />
Hover & tap animation
<motion />
extends React's event system with powerful gesture animations. It currently supports hover, tap, focus, and drag.
<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} onHoverStart={() => console.log('hover started!')} />
Motion's gestures are designed to feel better than using CSS or JavaScript events alone.
Scroll animation
Motion supports both types of scroll animations: Scroll-triggered and scroll-linked.
To trigger an animation on scroll, the whileInView
prop defines a state to animate to/from when an element enters/leaves the viewport:
<motion.div initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} />
Whereas to link a value directly to scroll position, it's possible to use MotionValue
s via useScroll
.
const { scrollYProgress } = useScroll() return <motion.div style={{ scaleX: scrollYProgress }} />
Layout animation
Motion has an industry-leading layout animation engine that supports animating between changes in layout using transforms.
It's as easy as applying the layout
prop.
<motion.div layout />
Or to animate between completely different elements, a layoutId
:
<motion.div layoutId="underline" />
Exit animations
By wrapping motion
components with <AnimatePresence>
we gain access to exit animations. This allows us to animate elements as they're removed from the DOM.
<AnimatePresence> {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null} </AnimatePresence>
Development tools
Motion provides developer tools to enhance your animation development experience, like loading your LLM with the latest Motion documentation, and visual bezier curve editors in VS Code.


Learn next
That's a very quick overview of Motion for React's basic features. But there's a lot more to learn!
Next, we recommend starting with the React animation guide. Here, you'll learn more about the different types of animations you can build with Motion.
Or, you can learn by doing, diving straight into our collection of Fundamentals examples. Each comes complete with full source code that you can copy-paste into your project.
Motion for React is a React animation library for building smooth, production-grade UI animations. You can start with simple prop-based animations before growing to layout, gesture and scroll animations.
Motion's unique hybrid engine combines the performance of native browser animations with the flexibility of JavaScript.
It's also trusted by companies like Framer and Figma to power their amazing no-code animations and gestures.
In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features.
Install
Motion is available via npm:
npm install motion
Features can now be imported via "motion/react"
:
import { motion } from "motion/react"
Your first animation
The <motion />
component is the core API in Motion for React. It's a DOM element, supercharged with animation capabilities.
<motion.ul animate={{ rotate: 360 }} />
When values in animate
change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via the transition
prop.
<motion.div animate={{ scale: 2, transition: { duration: 2 } }} />
Learn more about React animation
Enter animation
When a component enters the page, it will automatically animate to the values defined in the animate
prop.
You can provide values to animate from via the initial
prop (otherwise these will be read from the DOM).
<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />
Or disable this initial animation entirely by setting initial
to false
.
<motion.button initial={false} animate={{ scale: 1 }} />
Hover & tap animation
<motion />
extends React's event system with powerful gesture animations. It currently supports hover, tap, focus, and drag.
<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} onHoverStart={() => console.log('hover started!')} />
Motion's gestures are designed to feel better than using CSS or JavaScript events alone.
Scroll animation
Motion supports both types of scroll animations: Scroll-triggered and scroll-linked.
To trigger an animation on scroll, the whileInView
prop defines a state to animate to/from when an element enters/leaves the viewport:
<motion.div initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} />
Whereas to link a value directly to scroll position, it's possible to use MotionValue
s via useScroll
.
const { scrollYProgress } = useScroll() return <motion.div style={{ scaleX: scrollYProgress }} />
Layout animation
Motion has an industry-leading layout animation engine that supports animating between changes in layout using transforms.
It's as easy as applying the layout
prop.
<motion.div layout />
Or to animate between completely different elements, a layoutId
:
<motion.div layoutId="underline" />
Exit animations
By wrapping motion
components with <AnimatePresence>
we gain access to exit animations. This allows us to animate elements as they're removed from the DOM.
<AnimatePresence> {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null} </AnimatePresence>
Development tools
Motion provides developer tools to enhance your animation development experience, like loading your LLM with the latest Motion documentation, and visual bezier curve editors in VS Code.


Learn next
That's a very quick overview of Motion for React's basic features. But there's a lot more to learn!
Next, we recommend starting with the React animation guide. Here, you'll learn more about the different types of animations you can build with Motion.
Or, you can learn by doing, diving straight into our collection of Fundamentals examples. Each comes complete with full source code that you can copy-paste into your project.