Framer Motion

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

Check out the APIView 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.

View the API

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={selectedIdentifier}>
        <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.

View the API

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 }

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 API reference for Motion.

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

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
Framer

Framer Motion is a product by Framer and is released under the MIT license.