Motion (prev Framer Motion): JavaScript & React animation library

Matt Perry · Motion

3 min read Original article ↗

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.

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.

08

Motion values

useMotionValue drives animations and derived state in real time.

Start with 430+ 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.

Help your AI agent understand Motion

AI Kit

Give your agent specialist Motion judgement.

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

Explore AI Kit

Use pre-built animated sections

Motion UI

Begin with production-ready motion.

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

Browse Motion UI

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. Fixed

    • Guard animation window access in non-browser runtimes.
    • AnimatePresence: Improved compat with React 19 strict mode.

  2. Added

    • Toast stack: overlay notifications that fan into a scaled pile on a shared spring.

  3. Added

    • Reorder: Multidimensional reorder.
    • Reorder: Automatic axis detection.
    • Reorder: RTL support.

  4. Changed

    • Removed optional @emotion/is-prop-valid dependency in favour of explicit <MotionConfig isValidProp={isPropValid}>.

    Fixed

    • Hardware-accelerated SVG elements correctly apply final style on animation complete.
    • AnimatePresence: Ensure nodes are marked as safe to remove when rendering propagate with no motion children.

  5. Added

    • Hardware acceleration for backgroundColor in supported browsers.
    • Hardware acceleration for SVG elements.

    Fixed

    • AnimatePresence: Exiting children no longer interleave with entering children, which could reorder and remount children present in both renders.
    • motion: Throw error when passing a custom motion component an incorrect ref type.

Animation guides and examples.

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

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.