Open source / MIT Licensev13.4.0

Motion.Production-grade
animation library
for the web.

Get startedBrowse examples

Using an AI agent? Install the Motion skill and MCP

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.

Animations that move.

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

01

Independent transforms

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

02

Scroll animation

Hardware-accelerated scroll-linked motion via ScrollTimeline.

03

Native gestures

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

04

Layout animation

Animate between any two layouts with a single layout prop.

05

Spring physics

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

06

Exit animation

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

07

Timeline sequences

variants, stagger, and timelines orchestrate complex motion.

08

Motion values

useMotionValue drives animations and derived state in real time.

React & JavaScript animation examples.

Start with 450+ copy and paste examples, from scroll effects and gestures to carousels and typewriter animations.

Browse all examples

Documentation for React, JavaScript and Vue.

Choose your runtime and start with the API built for your project.

Browse all docs
  1. React
  2. JavaScript
  3. Vue

Give every project a head start.

Equip your agent with specialist Motion context, then build from production-ready animated sections that inherit your design system.

AI Kit

Give your agent specialist Motion judgement.

Send the latest docs, 450+ example sources, performance audits and production-ready CSS springs directly to your agent.

Explore AI Kit

Made with Motion.

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

Submit your work

Latest from Motion.

Release notes and magazine stories from the Motion team.

ChangelogRSS
  1. Motionpatch13.4.3

    Fixed

    • <motion />: Ensure animations replay when Suspense reveals memoized content.
  2. Motionpatch13.4.2

    Fixed

    • Reorder: Don't scale position of elements at origin 0 when dragConstraints changes.
    • Unrecognised easing names no longer throw.
  3. Motionpatch13.4.1

    Fixed

    • animate: CSS variable writes on SVGs apply to style attribute.
  4. Motion Studiomajor2.0.0

    Added

    • First release.
  5. Motionminor13.4.0

    Added

    • AnimateView: View transitions for React 19.3, built on React's ViewTransition.
Full changelog
MagazineRSS
All articles

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.

Discuss a partnership

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

Animation guides and examples.

Go straight to popular techniques, comparisons and production-ready starting points.

Tools for the full animation workflow.

Build faster, check performance and move from an idea to production.

  1. AI KitGive your agent specialist Motion skills.
  2. Motion UIProduction-ready animated sections for your design system.
  3. CSS StudioVisually edit the CSS in your existing project.
  4. MotionScoreFind and fix animation performance issues.