Motion: JavaScript & React animation library

2 min read Original article ↗
  • Free

    Completely free to use, MIT licensed and open source.

  • Production ready

    Trusted by Framer and Figma across hundreds of thousands of sites.

  • Hybrid engine

    JavaScript and hardware-accelerated browser APIs in one library.

  • Built for AI

    Agent-compatible documentation, skills and API.

  • Tiny footprint

    APIs up to 90% smaller than their GSAP alternative.

01> Animation library

Animations that move.

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

Animate x, y, rotate, scale on the same element, without wrappers.

Hardware-accelerated scroll-linked motion via ScrollTimeline.

hover, press, and drag that feel native, not bolted on.

Animate between any two layouts with a single layout prop.

Real spring math for animations that naturally react to user input.

AnimatePresence keeps elements alive so they can animate as they leave the DOM.

variants, stagger, and timelines orchestrate complex motion.

useMotionValue drives animations and derived state in real time.

Copy, paste, ship.

Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with 400+ copy and paste examples. Or adapt to your codebase using AI.

  1. Parallax
  2. Confetti
  3. Typewriter
  4. iOS App Folder
  5. iOS pointer animation
  6. Pokopia: Modal

03> Showcase

Made with Motion.

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

The professional animation toolkit. Yours forever.

A production toolkit on top of the open source library: an agent-native AI Kit, premium components, examples, tutorials, an IDE transition editor, and a private community. One payment, yours forever.

01AI Kit
  • 1.1Motion expert
  • 1.2MotionScore performance audit
  • 1.3CSS spring generator
  • 1.4Transition visualiser
  • 1.5Documentation search
  • 1.6Examples search

02Components

Ticker

Infinite marquees with true speed control and a unique minimal-clone algorithm.

Examples

Get Motion+

  • Examples

    Adapt 400+ examples to your codebase with your AI agent.

  • Early access

    Get access to new APIs before they're in general release.

  • Tutorials

    110+ step-by-step builds with live code.

  • Transition editor

    Visual transition editor in your IDE for Motion and CSS.

  • Community

    Private Discord and GitHub repo. Talk to the people building it.

Find & fix animation performance issues.

Audit any live website in under a minute. Every report grades you S through F, breaks the score down finding by finding, and hands your AI agent copy-paste fixes.

Pick your platform.

Drop Motion into the framework you're already using. Every API is documented per platform with live, editable examples.

> Developer tools