Introduction

Overview

Framer Motion is a simple yet powerful motion library for React.

It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed.

In this quick overview, we'll take a look at some of the APIs that Motion offers.

The <motion /> component

The core of Motion 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 />

Manual animations

The useAnimate hook can be used to manually trigger animations in effects and event handlers. It can also be used to orchestrate more complex animations.

<div onClick={() => animate(".boxes", { opacity: 0 })} />

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"