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 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 MotionValues 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 MotionValues.

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.

Learn More ›

<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.

Learn More ›

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

MotionValues 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.

Learn More ›

const x = useMotionValue(0)
const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])

return <motion.div drag="x" style={{ x, opacity }} />