Motion API
A complete API reference for Motion, a production-ready animation and gesture library.Overview
Motion shares the simple animation and gesture API as the Framer library, while maintaining HTML and SVG semantics.
This makes it simple to port your high-fidelity prototypes to a production-ready environment, or make something completely new!
- Animations: Making animations is as easy as setting values on the
animate
prop. Motion will automatically generate an animation for you, and this can be overridden with the powerfultransition
prop.
<motion.div animate={{ x: 100 }} />
- Gestures: Motion extends React's event system with powerful gesture recognisers. It supports hover, tap, pan and drag.
<motion.div
drag="x"
dragConstraints={{ left: -100, right: 100 }}
/>
- Variants: Variants can be used to animate entire sub-trees of components with a single
animate
prop. Options likewhen
andstaggerChildren
can be used to declaratively orchestrate these animations.
const list = { hidden: { opacity: 0 } }
const item = { hidden: { x: -10, opacity: 0 } }
return (
<motion.ul animate="hidden" variants={list}>
<motion.li variants={item} />
<motion.li variants={item} />
<motion.li variants={item} />
</motion.ul>
)
- Server-side rendering: The animated state of a component will be rendered server-side to prevent flashes of re-styled content after your JavaScript loads.
<motion.div initial={false} animate={{ x: 100 }} />
- MotionValues: Create declarative, reactive chains of
MotionValue
s that can update as a result of animations and/or gestures.
const x = useMotionValue(0)
const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0])
return <motion.div drag="x" style={{ x, opacity }} />
- Scroll-based animations: Performant scroll-based animations like progress bars or parallax are super-easy to make with the special viewport scroll
MotionValue
s.
const { scrollYProgress } = useViewportScroll()
return (
<motion.path style={{ pathLength: scrollYProgress }} />
)
# Quick Start
Motion requires React 16.8 or greater.
# Installation
Install framer-motion
from npm.
npm install framer-motion
# Importing
Once installed, you can import Motion into your components via framer-motion
.
import { motion } from "framer-motion"
# Topics
# Motion components
motion
components are the core of the Motion API. There's a motion
component for every HTML and SVG element. They work exactly the same, with additional props that allow you to declaratively add animations and gestures.
<motion.div animate={{ scale: 0.5 }} />
# Animation
motion
components are animated via the flexible animate
prop. This can accept an object, variant label(s), or a reference to imperative animation controls.
const variants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
}
return (
<motion.div
initial="hidden"
animate="visible"
variants={variants}
/>
)
# Gestures
motion
components can detect hover, tap, pan and drag gestures.
They also offer some helper props to temporarily animate while a gesture is active.
Learn More ›<motion.div
drag="x"
dragConstraints={{ left: -100, right: 100 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
/>
# MotionValue
MotionValue
s are used to track the state and velocity of animating values, outside of React's render lifecycle.
They're created automatically and used internally by motion
components. But they can also be created manually and chained together to create performant, declarative effects.
const x = useMotionValue(0)
const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])
return <motion.div drag="x" style={{ x, opacity }} />