Open source / MIT Licensev13.5.0

Motion.Production-grade
animation library
for the web.

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 480+ copy and paste examples, from scroll effects and gestures to carousels and typewriter animations.

Documentation for React, JavaScript and Vue.

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

Build faster with Motion+.

AI Kit for your coding agent, Motion UI and 480+ premium examples. All included in Motion+.

AI Kit and MCP

Make Cursor a Motion expert.

AI Kit and the Motion MCP give Cursor, Claude and other coding agents the latest docs, 480+ example sources and the full Motion UI catalogue.

Get AI Kit with Motion+

Made with Motion.

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

Latest from Motion.

New examples, release notes and magazine stories from the Motion team.

ChangelogRSS
  1. Motionmajor14.0.0

    Changed

    • Removed internal APIs restored in 13.5.1 for compatibility with framer-motion 13.0–13.4. Future removed internal APIs won't cause cross-compatibility issues since pinning internal framer-motion, motion-dom and motion-utils dependencies.
  2. Motionpatch13.5.1

    Changed

    • <motion>: Fall back to the attribute in readSVGValue when computed style is empty.
    • <motion>: Internal changes to animateChanges for size reductions.

    Fixed

    • scroll: Temporarily reverted removal of internal observeTimeline API to fix compatibility with previous 13.x APIs. Moving to pinned dependencies before removing in 14.x.
    • styleEffect: Cleaning up an earlier value no longer removes a value that was bound to the same key after it.
    • svgEffect: No longer writes transforms and origins as attributes.
    • <motion>: inherit={false} now correctly not inheriting parent animations.
    • <motion>: Fix sortNodePosition throwing when a sibling hasn't mounted
  3. Motionminor13.5.0

    Added

    • spring: Now accepts negative bounce (0--1) to define overdamped springs.

    Changed

    • <m>: 20% smaller.
    • useSpring: 10% smaller.
    • scroll/useScroll: Use main thread for all offset animations.

    Fixed

    • Ensure warning and error messages are cleaned from production build.
    • Ensure values are never rendered before they've been resolved.
  4. Motionpatch13.4.7

    Changed

    • scroll/useScroll: More offsets are now hardware accelerated via ViewTimeline.

    Fixed

    • animate: Reduced size of Motion Studio introspection call.
    • useTransform: Accelerated values now correctly clamp.
    • scroll/useScroll: Ensure offsets work the same across the JS main thread and ViewTimeline.
    • scroll/useScroll: Remove ScrollTimeline/ViewTimeline observer in favour of main-thread scroll tracking.
  5. Motionpatch13.4.6

    Fixed

    • AnimatePresence: mode="wait" no longer drops new children if exit completes during a React transition.

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.

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+AI Kit, Motion UI and premium examples in one place.
  3. CSS StudioVisually edit the CSS in your existing project.
  4. MotionScoreFind and fix animation performance issues.