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 docs View 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 docs

Tweak the parameters to animate.

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

Scale

Rotate

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 docs

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

Read the docs View on GitHub

MotionValue
useSpring
Server-side rendering
CSS variable support
Unmount animations
Position transitions
Accessibility options
Handoff from Framer