Introduction

#Overview

Framer Motion is a production-ready motion library for React from Framer.

It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.

#The <motion /> component

The core of the library is the motion component. Think of it as a plain HTML or SVG element, supercharged with animation capabilities.

<motion.div />

#Animations

Animating a motion component is as straightforward as setting values on the animate prop.

<motion.div animate={{ x: 100 }} />

When these values change, Framer Motion will automatically generate an animation to the latest values. This animation will feel great by default, but it can be configured with the flexible transition prop.

#Gestures

<motion /> extends React's event system with powerful gesture recognisers. It supports hover, tap, pan and drag.

<motion.div
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 1.1 }}
  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>
)

#Scroll-triggered animations

Elements can animate as they enter and leave the viewport with the handy whileInView prop.

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>

#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

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.

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

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

#Layout animations

Framer Motion is capable of animating changes in layout using performant transforms.

<motion.div layout />

#Quick Start

Framer Motion requires React 18 or greater.

#Installation

Install framer-motion from npm.

npm install framer-motion

#Importing

Once installed, you can import Framer Motion via framer-motion.

import { motion } from "framer-motion"