Framer
Motion

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

Production-ready declarative animations.

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

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.

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.

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.

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.

  • 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.