Open source / MIT Licensev12.42.1

Motion.
Production-grade animation for the web.

Get started

Available for React JavaScript Vue

01 / Free
Completely free to use, MIT licensed and open source.
02 / Production ready
Trusted by Framer and Figma across hundreds of thousands of sites.
03 / Hybrid engine
JavaScript and hardware-accelerated browser APIs in one library.
04 / Built for AI
Agent-compatible documentation, skills and API.
05 / 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.

Copy, paste, ship.

Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with 400+ copy and paste examples. Or adapt to your codebase using AI.

Browse all examples
> Live example/ Skeleton ShimmerOpen
  1. Parallax
  2. Confetti
  3. Typewriter
  4. iOS App Folder
  5. iOS pointer animation
  6. Pokopia: Modal

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, 400+ 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 our expert Motion+ community.

Latest from Motion.

Release notes and magazine stories from the Motion team.

Changelog
  1. Motion AI Kitminor6.2.0

    Added

    • MCP: search-motion-codex now returns Motion UI components and sections (Motion+ / React) as full multi-file paste-ready source — same delivery model as examples, baked into the package.
  2. Motion UIpatch0.0.1

    Added

  3. Motionpatch12.42.2

    Fixed

    • animateView: Cropped group layers now animate border-radius from the old to new radius.
  4. Motionpatch12.42.1

    Fixed

    • animateView: Old layer fade out now cancelled when defining .new().
  5. Motionminor12.42.0

    Changed

    • animateView: Layers are automatically grouped to match their DOM-hierarchy. New .group(false) method opts-out.

    Fixed

    • animateView: Auto-crop is now aspect-ratio aware, disabling crops for matching aspect-ratios.
    • animateView: Disabled automatic border-radius animation.
Full changelog
Magazine
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.

Become a sponsor

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

Choose your runtime

Start with the API built for your project.

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

Developer tools

  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.