Make it move with Motion.

Make it move with Motion.

Make it move with Motion.

A robust animation library for modern web projects using JavaScript, React, or Vue.

npm install motion

npm install motion

npm install motion

Free and

open-source

Easy to use

Production-ready

Hybrid engine

Robot friendly

Tiny footprint

Examples

Examples

Powerful animations

Create smooth, high-performance animations with Motions easy-to-use APIfrom simple transforms to advanced interactive gestures.

Simple
Transforms
Scroll
Exit animations
Springs
Gestures
Layout animations
Sequencing

Sponsors

Sponsors

Motion is supported by the finest in the industry

Diamond sponsor
Platinum sponsors
gold sponsors

Motion is made possible thanks to our amazing sponsors.

What's new

What's new

Updates

Always in Motion. Follow the latest releases, content, and examples. All in one feed.

Motion

12.17

Jun 11, 2025

🤖 Introducing Motion for AI

Supercharge your LLM with Motion for AI:

Plus Motion+ Rules and vibe coding guides for Framer, Figma and v0.

Motion+

1.2

Jun 10, 2025

Added

Blog:

Building the ultimate ticker

Jun 5, 2025

Ticker compoments are becoming common decorative features, but building a good one isn't easy. Let's take a look at the problem with CSS components, and how Motion+ Ticker aims to solve them.

motion+

motion+

Advanced features

Upgrade to Motion+ for lifetime access to premium APIs, an extensive library of examples, early access to new features, and a private Discord community and more.

100+ premium examples

A growing collection of high-quality, ready-to-use examples for JavaScript, React and Vue.

Rotate the square slower

AI-powered editing

Open examples in Vercel’s v0 AI editor and tweak as needed.

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:

Motion Expert Copilot

A .cursorrules that guides AI editors with best practices.

8

Motion+

Private Discord

Stay updated with Motion releases, showcase your work, and get support.

UI library integrations

Includes integration examples, starting with Radix.

Delight the web with Motion

Motion is available for vanilla JavaScript, React and Vue.

Or you can start with one of our platform-specific integration guides.

Motion is available for vanilla JavaScript, React and Vue.

Or you can start with one of our platform-specific integration guides.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.