Introduction

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

Create declarative, reactive chains of MotionValues 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.

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 }} />