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,
  }}
/>
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"
  }}
/>
<motion.div
  animate={{ scale: 0.5, rotate: 180, opacity: 0.5 }}
  transition={{
    yoyo: Infinity,
    duration: 2,
    ease: "easeInOut"
  }}
/>
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%"
  }}
/>
Open in Sandbox
Drag

Making a motion component draggable is as simple as setting its drag prop to true. Dragging behaviour is fully configurable with axis-locking, elastic drag constraints, and gesture-ending transitions.

const constraintsRef = useRef(null)
const x = useMotionValue(0)
const rotateY = useTransform(x, [-200, 0, 200], [-45, 0, 45], {
  clamp: false
})
return (
  <motion.div ref={constraintsRef} style={{ rotateY }}>
    <motion.div
      drag="x"
      dragConstraints={constraintsRef}
      style={{ x }}
    />
  </motion.div>
)
Open in Sandbox
Scroll

Scroll animations can be driven with the convenient useViewportScroll hook. It returns four MotionValues that update when the viewport scrolls for effects like parallax, or scroll progress indicators.

const { scrollYProgress } = useViewportScroll()
const scale = useTransform(scrollYProgress, [0, 1], [0.2, 2]);
return (
  <motion.div
    style={{ scale }}
  >
    <motion.div
      style={{
        scaleY: scrollYProgress
      }}
    />
  </motion.div>
)
Open in Sandbox
Paths

motion.path components expose three powerful SVG path properties: pathLength, pathSpacingand pathOffset. These are all set as a value between 0 and 1, without any manual path measurement required.

const icon = {
  hidden: {
    pathLength: 0,
    fill: "rgba(255, 255, 255, 0)"
  },
  visible: {
    pathLength: 1,
    fill: "rgba(255, 255, 255, 1)"
  }
}
return (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
  >
    <motion.path
      d="M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z"
      variants={icon}
      initial="hidden"
      animate="visible"
    />
  </svg>
)
Open in Sandbox

There’s a whole lot more to discover in Framer Motion:

Get started ›
  • MotionValue
  • useSpring
  • Server-side rendering
  • CSS variable support
  • Unmount animations
  • Position transitions