Free and

open-source

Easy to use

Productionready

Hybrid engine

Great for LLMs

Tiny footprint

Animation library

Animations that move

Create high-performance web animations with Motion’s easy-to-use API — from simple transforms to advanced interactive gestures.

Simple API

Motion’s pick-up-and-play API is easy to start and fun to master.

Independent transforms

Animate x, y, rotateZ etc independently, without wrapper elements.

Scroll animation

Smooth, hardware-accelerated scroll animations.

Exit animation

Motion’s AnimatePresencemakes it easy to animate elements as they exit.

Gestures

Hover, press and drag gestures that feel native, not “webby”.

Layout animation

Animate between different layouts with Motion’s industry-leading layout animation engine.

Timeline sequences

Variants, stagger and timelines make it easy to precisely orchestrate animations.

Spring physics

Real spring physics for great-feeling animations.

Showcase

Made with Motion

Everything’s possible with Motion. Here are some of the best creations from our expert Motion+ community.

Partners

Platinum sponsors

gold sponsors

Silver sponsors

Premium components

Next-level animation APIs

Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with Motion+ components. These next-level Motion APIs are built for maximum performance and customisation.

Whether it’s a unique cursor, an animated counter, or a split-text reveal: These components will save you hours of dev time.

The Vault

Production-ready animations

Unlock a vault of 330+ pre-built animations for JavaScript, React and Vue to copy & paste directly into your own project.

Plus, an ever-growing library of 100+ step-by-step tutorials written by the creator of Motion will teach you the official best practices and core principles behind each effect.

Learn

Master Motion

Level up with official examples, in-depth tutorials, and courses from top industry leaders.

Workflow

Your complete animation workflow

Building beautiful, performant animations is hard. You can waste hours tweaking curves, fighting AI with outdated information, or not knowing where to find help.

Motion+ provides the ultimate professional toolkit, empowering you to design with immediate feedback, code with AI-driven confidence, and collaborate with a vibrant community of 600+ Motion experts.

Visual editor alpha

Perfect your CSS and Motion bezier curves, directly in VS Code.

1

# Motion

2

3

You’re an expert in Motion, React and TypeScript.

4

5

## Performance

6

7

• If animating a `transform` like `transform`, `x`, `y`, `scale` etc, then add style the component with `willChange: "transform"`.

8

• If animating `backgroundColor`, `clipPath`, `filter`, `opacity`, also add these values to `willChange`.

9

• Inside functions that will or could run every frame (hot functions), like the `motion` component’s `onUpdate` prop, `useTransform` etc:


Expert AI

Enhance your AI editor with custom rules written by the author of Motion.

8

Motion+


Private Discord

Join 600+ developers sharing, helping, and building with Motion.

12 million

Motion

React Spring

GSAP

Anime.js

Changelog

2.4.0

Jan 23, 2026

2.5.0

Jan 23, 2026

12.29.0

Jan 22, 2026

Examples

Tutorials

How-To

The Web Animations API is included with every browser, but only supports CSS timing functions. Let’s supercharge it with GSAP’s easing functions!

Motion is supported by the best in the industry.