Quick start
Motion for React is a simple yet limitless animation library. It's the only animation library with a hybrid engine, capable of hardware accelerated animations.
It's also trusted by Framer to power its 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
React 18
Motion is available via npm:
Features can now be imported via "motion/react"
:
Note: Motion for React contains APIs specifically tailored for React, but everything from vanilla Motion is also compatible and available for advanced use-cases.
React 19 / Next 15
React 19 users must currently install via the "motion"
alpha branch:
Usage
The core of Motion for React is the <motion />
component. It's a normal DOM element, supercharged with animation capabilities.
Animating a motion
component is as straightforward as setting values via the animate
prop:
When values in animate
change, the component will animate. Motion has great-feeling defaults, but animations can of course be configured via the transition
prop.
Enter animation
When a component enters the page, it will automatically animate from the rendered value, but you can provide different values via the initial
prop.
Or disable this initial animation entirely by setting initial
to false
.
Gestures
<motion />
extends React's event system with powerful gesture recognises. It currently supports hover, tap, focus, and drag.
Motion's gestures are designed to feel better than using CSS alone. For instance, hover events are correctly not triggered by touch screen taps. Learn more about gestures.
Scroll animations
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:
Whereas to link a value directly to scroll position, it's possible to use MotionValue
s via useScroll
.
Learn more about Motion's scroll animations.
Layout animations
Motion has an industry-leading layout animation engine that supports animating between changes in layout, using only transforms, between the same or different elements, with full scale correction.
It's as easy as applying the layout
prop.
Or to animate between different elements, a layoutId
:
Learn more about layout animations.
Exit animations
Animating elements when they're removed from the DOM is usually messy.
By wrapping motion
components with <AnimatePresence>
we gain access to the exit
prop.
Learn more about AnimatePresence
.
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 diving further into the the <motion />
component to learn more about its powerful features, like variants. Or if you're after something more advanced, learn about MotionValue
s, Motion's composable values API. Timelines links
A Motion+ membership will give you early access to features & content, access to our private Discord, and more.
It's a one-time fee that grants lifetime access. No subscription necessary!