Motion — JavaScript & React animation library

2 min read Original article ↗

Animations that move

Create high-performance web animations with Motion’s easy-to-use API — from simple transforms to advanced interactive gestures.

  • Simple API

    Motion’s pick-up-and-play API is easy to start and fun to master.

  • Independent transforms

    Animate x, y, rotateZ etc independently, without wrapper elements.

  • Scroll animation

    Smooth, hardware-accelerated scroll animations.

  • Exit animation

    Motion's AnimatePresencemakes it easy to animate elements as they exit.

  • Gestures

    Hover, press and drag gestures that feel native, not “webby”.

  • Layout animation

    Animate between different layouts with Motion’s industry-leading layout animation engine.

  • Timeline sequences

    Variants, stagger and timelines make it easy to precisely orchestrate animations.

  • Spring physics

    Real spring physics for great-feeling animations.

Made with Motion

Everything's possible with Motion. Here are some of the best creations from our expert Motion+ community.

Next-level animation APIs

Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with Motion+ components. These next-level Motion APIs are built for maximum performance and customisation.

Whether it's a unique cursor, an animated counter, or a split-text reveal: These components will save you hours of dev time.

Production-ready animations

Unlock a vault of 300+ pre-built animations for JavaScript, React and Vue to copy & paste directly into your own project.

Plus, an ever-growing library of step-by-step tutorials written by the creator of Motion will teach you the official best practices and core principles behind each effect.

Master Motion

Level up with official examples, in-depth tutorials, and courses from top industry leaders.

Your complete animation workflow

Building beautiful, performant animations is hard. You can waste hours tweaking curves, fighting AI with outdated information, or not knowing where to find help.

Motion+ provides the ultimate professional toolkit, empowering you to design with immediate feedback, code with AI-driven confidence, and collaborate with a vibrant community of 600+ Motion experts.

Visual editor alpha

Perfect your CSS and Motion bezier curves, directly in VS Code.

3

You're an expert in Motion, React and TypeScript.

7

- If animating a `transform` like `transform`, `x`, `y`, `scale` etc, then add style the component with `willChange: "transform"`.

8

- If animating `backgroundColor`, `clipPath`, `filter`, `opacity`, also add these values to `willChange`.

9

- Inside functions that will or could run every frame (hot functions), like the `motion` component's `onUpdate` prop, `useTransform` etc:

Expert AI

Enhance your AI editor with custom rules written by the author of Motion.

Motion+

Private Discord

Join 600+ developers sharing, helping, and building with Motion.

Partners

Platinum sponsors

gold sponsors

Library updates

  • Dec 10, 2025

  • Dec 10, 2025

  • Dec 9, 2025

Examples

Tutorials

Motion is supported by the best in the industry.