Motion+

Motion.
Production-grade animation for the web.

Available for React JavaScript Vue

Get started
  • Free

    Completely free to use, MIT licensed and open sourced.

  • Production ready

    Trusted by Framer and Figma on 100ks of sites.

  • Hybrid engine

    The only dual JS and hardware accelerated 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.

>Independent transforms

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

>Scroll animation

Hardware-accelerated scroll-linked motion via ScrollTimeline.

>Native gestures

hover, press, and drag that feel native, not webby.

>Layout animation

The industry-leading engine for animating between any two layouts via layout.

>Spring physics

Real spring math for animations that feel grounded, not curved.

>Exit animation

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

>Timeline sequences

variants, stagger, and timelines orchestrate complex motion.

>Motion values

useMotionValue drives animations and derived state in real time.

02> ExamplesBrowse all examples

Copy, paste, ship.

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

> Live example/ Skeleton ShimmerOpen
  1. Scroll velocity: 3D planes
  2. Typewriter
  3. iOS App Folder
  4. iOS pointer animation
  5. Parallax
  6. Floating Action Button
03> Showcase

Made with Motion.

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

04> Motion+See full pricing

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 Code Audit
  • 1.3CSS spring generator
  • 1.4Transition visualiser
  • 1.5Documentation search
  • 1.6Examples search
02Components
Ticker
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
FIG.02.1
Carousel
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
FIG.02.2
Cursor
FIG.02.3
AnimateNumber
FIG.02.6
  • Examples

    Adapt 370+ 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.

Get Motion+
05> SponsorsBecome a sponsor

Trusted by the world's leading teams.

Motion is deployed and sponsored by the best teams in the industry, powering UI animations across millions of sites.

Partners

Motion powers the animations across hundreds of thousands of Framer sites.

Visit Framer

Motion is partnered with Cursor on one-click open-in-AI examples for every component.

Visit Cursor

Platinum

06> MotionScoreLearn more

Find & fix animation performance issues.

Find and fix animation performance issues on any website. Reports use a six-tier grade with a per-finding breakdown and copy-paste fixes for your AI agent.

Free audit within 60 seconds. Powered by MotionScore.

07> DocumentationBrowse all docs

Pick your platform.

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

ReactJavaScriptVue
> Developer tools