Introduction
Get started with Motion and learn by exploring interactive examples.
#Overview
Motion is a production-ready motion library for React from Framer. It brings declarative animations, effortless layout transitions and gestures while maintaining HTML and SVG semantics.
#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 powerful transition
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 like when
and staggerChildren
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
Create declarative, reactive chains of MotionValue
s that can update as a result of animations and/or gestures.
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.
<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 }} />