Open source / MIT Licensev14.1.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 490+ 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

Build faster with Motion+.

The new Gallery component, AI Kit for your coding agent, Motion UI and 490+ premium examples. All included in Motion+.

New in Motion+

Gallery is the newest Motion+ component for React. Try it today in Motion+ 4.

Get Gallery with 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, 490+ 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.

Submit your work

Latest from Motion.

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

New examplesAll examples
ChangelogRSS
  1. Motionminor14.2.0

    Added

    • Hardware accelerated independent transforms like x, y, scaleX etc.
  2. Motionpatch14.1.1

    Fixed

    • Fix velocity hand-off for hardware-accelerated springs.
    • cubicBezier: More accurate, 2x faster.
    • Reorder: Fix click events on reoredered items.
    • useTransform: Fix desync when source is set in an effect under Strict Mode.
  3. Motion UIminor4.1.0

    Added

    • Gallery: Switching to grid, its cells fade in outward from the centre on the transition's delay, like transition={{ arrange: { delay: stagger(0.05) } }}.
    • Gallery: The detail strip's stagger takes stagger()'s from, so transition={{ close: { delay: stagger(0.04, { from: "last" }) } }} closes it from the outside in.

    Changed

    • Gallery: Opening detail fades the whole strip in as one staggered wave, both sides of the open item together.
    • Gallery: An item that changes places without flying there moves with its neighbours as it fades.

    Fixed

    • Gallery: Items gather behind the active one again when switching to grid.
    • Gallery: New options of the same arrangement, like a ring's rotateX, blend its camera as one piece again.
    • Gallery: Switching away from grid after paging no longer flies the previously active item off alone, or others in from where they were last drawn.
    • Gallery: Closing detail just after a change no longer flies the previously open item out of the strip.
  4. Motion UIpatch4.0.2

    Fixed

    • Gallery: Closing detail fades the whole strip out together. Thumbnails with no place in view to return to no longer linger.
    • Gallery: Paging on straight after switching to grid no longer hides the item paged to.
    • Gallery: Switching away from grid no longer resizes its items to the next arrangement's item size as they fade out.
  5. Motion UIpatch4.0.1

    Added

    • Gallery: rearrange option and shift() preset set the state an item fades in from when it changes places without flying there.
    • Gallery: rearrangeFrom option sets where the stagger starts as the detail strip opens or closes.
    • Gallery: gather option. Items collapse behind the active one when switching to grid.

    Fixed

    • Gallery: Items no longer fly across the view when loop or arrange changes. They fade out and in on the side they belong.
    • Gallery: Opening and closing detail fades the other items between the arrangement and the strip.
    • Gallery: The camera no longer swings between arrangements, so items entering the new one fade in where they belong.
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+Gallery, 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.