Framer Motion

An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile.

A successor to Pose by Popmotion.

Get started ›Explore features ›
<motion.div
  animate={{
    x: 0,
    y: 0,
    scale: 1,
    rotate: 0,
  }}
/>
COPY
Animations

Production-ready declarative animations

Framer Motion automatically generates natural animations for every props it receives.

Learn more ›
  • No eventsClick, tap or pan…
Gestures

Complex events and gestures

Building upon React, Framer Motion offers more advanced event listeners.

Learn more ›
<Frame
  animate={{ scale: 0.5, rotate: 180, opacity: 0.5 }}
  transition={{
    yoyo: Infinity,
    duration: 2,
    ease: "easeInOut"
  }}
/>
COPY
<motion.div
  animate={{ scale: 0.5, rotate: 180, opacity: 0.5 }}
  transition={{
    yoyo: Infinity,
    duration: 2,
    ease: "easeInOut"
  }}
/>
COPY
Handoff

Try it today in Framer X

Take animations from play to production in Framer X, powered by Framer Motion.

Learn more ›

Features

Animations

When any value in animate changes, the component will automatically animate to the updated target. The default snappy animation is fully configurable via the transition prop.

<motion.div
  initial={{ scale: 0 }}
  animate={{ rotate: 180, scale: 1 }}
  transition={{
    type: "spring",
    stiffness: 260,
    damping: 20
  }}
/>
Open in Sandbox
Variants

Variants are a declarative way to orchestrate complex animations throughout a component tree. By providing multiple components with a variants object with visual states of the same name, they can all be animated in sync by the switch of a single animate prop.

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.1
    }
  }
}
const item = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1
  }
}
Open in Sandbox
Gestures

Motion extends the basic set of event listeners provided by React with simple yet powerful gesture recognizers. It also provides two helper props, whileHover and whileTap, which define what states to animate to while a gesture is active.

<motion.div
  whileHover={{ scale: 1.2, rotate: 90 }}
  whileTap={{
    scale: 0.8,
    rotate: -90,
    borderRadius: "100%"
  }}
/>