Motion is deployed and sponsored
by the best teams in the industry

The animation library loved by humans and agents alike.

Layout, scroll, gestures, 3D, and hardware acceleration for React, Vue and JavaScript.

Free and open source. Previously Framer Motion.

npm install motion && npx motion-ai

Get started

Learn more

Small APIs.
Expressive interfaces.

It only takes a few lines of Motion to bring an interface to life in React, JavaScript or Vue. Learn once, build anything.

ShowcaseLayout animations

Layout animations

Animate changes to size, position and order that CSS can’t, even from one component to another, with fast transforms.

<motion.img layoutId={id} onClick={() => setOpen(id)} />

<AnimatePresence>
  {open && <motion.img layoutId={open} className="detail" />}
</AnimatePresence>

Layout docs Layout examples

Gesture animations

Gestures that feel native. Press works from the keyboard, hover ignores touch, and drag throws with momentum.

<motion.div
  drag
  dragSnapToOrigin
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 1 }}
  whileDrag={{ scale: 1.2 }}
/>

Gestures docs Gestures examples

Scroll animations

Link any value to scroll progress. Motion uses the browser’s ScrollTimeline when possible for smooth, hardware-accelerated scroll effects.

const { scrollXProgress } = useScroll({ container })

<motion.div style={{ scaleX: scrollXProgress }} />

Scroll docs Scroll examples

Stiffness200Damping18Mass1

Spring animations

Physics springs that carry velocity. A value follows its target with real stiffness, damping and mass, and stays fluid when the target moves again mid-flight.

const x = useSpring(0, { stiffness: 200, damping: 18, mass: 1 })
const y = useSpring(0, { stiffness: 200, damping: 18, mass: 1 })

<div onPointerMove={(e) => { x.set(e.clientX); y.set(e.clientY) }}>
  <motion.div style={{ x, y }} />
</div>

Springs docs Springs examples

Hardware acceleration
Most animations run on the browser’s own animation engine, so they stay smooth while your JavaScript is busy.
Exit animations
AnimatePresence keeps a component on the page until its exit animation finishes.
3D
Animate Three.js meshes, materials and shader uniforms with the same springs and timelines as the DOM.
Small by default
Start at 3.2kb with the mini animate function, or load features as you need them with LazyMotion.

Motion+ unlocks the full animation workflow.

From beginners to experts, Motion+ helps you ship animations that look great and perform even better. Components, examples, tutorials, visual editing, and our powerful AI Kit.

Premium Motion UI components

Accessible, beautiful components that adopt to your existing design with CSS, AI or shadcn.

Explore Motion UI

Access the full vault

A trove of performance-graded examples and tutorials for React, JavaScript and Vue. Adapt to your site with one click.

Browse the examples

Your agent, now a Motion expert

Give your agent the latest docs, the full examples vault, and access to Motion UI, before it writes an animation. Then find and fix performance issues with the MotionScore skill.

About AI Kit

0.00.51.01.5

.description

buttons

0.00 / 1.52s

Edit animations visually

Tune timing, easing and springs on a visual timeline editor directly in your real website, then send changes to your local coding agent to implement with one click.

About Motion Studio