Framer Motion

A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

Read the documentationView on GitHub

Production-ready declarative animations.

A simple declarative syntax means you write less code. Less code means your codebase is easier to read and maintain.

Read the documentation

Tweak the parameters to animate.

<motion.div
  animate={{
    x: 0,
    y: 0,
    scale: 1,
    rotate: 0,
  }}
/>

Animations that work like magic.

When animating between two separate components, Framer Motion will take care of everything in between.

Get started

Tap to open a card.

const [selectedId, setSelectedId] = useState(null)
 
<AnimateSharedLayout type="crossfade">
  {items.map(item => (
    <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}>
      <motion.h5>{item.subtitle}</motion.h5>
      <motion.h2>{item.title}</motion.h2>
    </motion.div>
  ))}
 
  <AnimatePresence>
    {selectedId && (
      <motion.div layoutId={selectedId}>
        <motion.h5>{item.subtitle}</motion.h5>
        <motion.h2>{item.title}</motion.h2>
        <motion.button onClick={() => setSelectedId(null)} />
      </motion.div>
    )}
  </AnimatePresence>
</AnimateSharedLayout>

Complex events and gestures.

Framer Motion offers more advanced listeners and also extends the basic set of React event listeners.

Read the documentation

Tap and drag the circle.

  • onTapCancelpoint: { x: 544, y: 4627 }
  • onDragEndpoint: { x: 7, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 7, y: -2 }
  • onDragpoint: { x: 7, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 7, y: -2 }
  • onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
  • onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
  • onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
  • onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
  • onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
  • onDragStartpoint: { x: 0, y: 0 }, delta: { x: 3, y: -1 }, offset: { x: 3, y: -1 }
  • onTapStartpoint: { x: 537, y: 4629 }

Framer runs on Motion.

Designers who prototype in Framer can leverage the power of Framer Motion without touching a line of code, then handoff the animation values to be used 1:1 in production.

Try Framer for free

Features

Explore the latest features. See why Framer Motion is the best React animation library.

See more examples

Animation

Variants

Gestures

Drag

Scroll

Path

Get started with Framer Motion.

There’s a whole lot more to discover, dive into the complete documentation for Motion.

Read the documentationView on GitHub
  • MotionValue
  • useSpring
  • Server-side rendering
  • CSS variable support
  • Unmount animations
  • Position transitions
  • Accessibility options
  • Handoff from Framer