Skip to content
MotionMotion+

Open source / MIT licencev13.0.0

Motion. Production-grade animation for the web.

Get started

Available for

  • React
  • JavaScript
  • Vue

Why use Motion

  • Free

    Completely free to use, MIT licensed and open source.

  • Production ready

    Used across hundreds of thousands of sites.

  • Hybrid engine

    JavaScript and hardware-accelerated browser APIs in one library.

  • Built for agents

    Agent-compatible documentation, skills and API surface.

  • Tiny footprint

    Up to 90% smaller than the usual alternative.

Animation library

Animations that move.

Create high-performance web animations with an easy API, from simple transforms to advanced interactive gestures.

  • 01

    Independent transforms

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

    { rotate: 15, x: "50%" }

  • 02

    Scroll animation

    Hardware-accelerated scroll-linked motion via scrollTimeline.

    scroll()

  • 03

    Native gestures

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

    drag = true

  • 04

    Layout animation

    Animate between any two layouts with a single layout prop.

    layout = true

  • 05

    Spring physics

    Real spring maths for animations that react naturally to input.

    type: "spring"

  • 06

    Exit animation

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

    exit={{ ... }}

  • 07

    Timeline sequences

    variants, stagger and timelines orchestrate complex motion.

    stagger(0.04)

  • 08

    Motion values

    useMotionValue drives animations and derived state in real time.

    useTransform(v, x => x * 10)

Available for

  • React
  • JavaScript
  • Vue
All documentation →

Examples

Copy, paste, ship.

Build previously complex effects, like magnetic cursors or infinite tickers, with 410+ copy-and-paste examples.

Browse all examples →

Live example / skeleton shimmer

Workflow

Give every project a head start.

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

Help your agent understand Motion

Give your agent specialist judgement.

Send the latest docs, 410+ example sources, performance audits and production-ready springs straight to your agent.

Explore the AI kit

Use pre-built animated sections

Begin with production-ready motion.

Browse performance-rated animated sections, install the source and inherit the design tokens your project already uses.

Browse the UI library

Live section preview

Motion+

Bring both into one workflow.

The AI kit and the UI library are both included, with premium APIs, examples and lifetime updates.

Get Motion+

Showcase

Made with Motion.

Everything is possible with Motion. Here are some of the best things the community has built.

Submit your work →

Updates

Latest from Motion.

Release notes and magazine stories from the team.

ChangelogRSS

  1. Major

    13.0.0

    Changed
    • Removed the optional @emotion/is-prop-valid dependency in favour of an explicit <MotionConfig isValidProp>.
    Fixed
    • Hardware-accelerated SVG elements now apply their final style when the animation completes.
    • AnimatePresence marks nodes safe to remove when rendering propagate with no motion children.

  2. Minor

    12.43.0

    Added
    • Hardware acceleration for backgroundColor in supported browsers.
    • Hardware acceleration for SVG elements.
Full changelog

MagazineRSS

Announcement —

Introducing the UI library

Production-ready animated sections and components for React, performance-graded, dropping into your design system through the registry or an agent.

Matt Perry

All articles

Sponsors

Trusted by the world's best teams.

Become a sponsor →
  • Framer
  • Figma
  • Vercel
  • Linear
  • Raycast
  • Supabase