Docs

Examples

Motion+

Docs

Examples

Motion+

Docs

Examples

Motion+

Motion for React

Make beautiful websites with the industry-standard animation library for React. Previously Framer Motion.

npm install motion

Quick start

Also available for JavaScript and Vue

Free and

open-source

Easy to use

Production-ready

Hybrid engine

Robot friendly

Tiny footprint

React animations

Built for React

Simple components and hooks make spring, scroll, and layout animations a breeze.

<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
whileHover={{ scale: 1.1 }}
whilePress={{ scale: 0.9 }}
/>

Get started

Examples

Powerful animations

Create smooth, high-performance animations with Motion for React—from simple transforms to advanced interactive gestures.

Simple

Transforms

Scroll

Exit animations

Springs

Gestures

Layout animations

Sequencing

Explore all examples

FAQs

Frequently asked questions

What is Motion for React?

Motion for React is a performant animation library built specifically for React developers.

Its simple component-based API is easy to start and fun to master.

It offers fast animations built on native browser APIs, plus a industry-leading layout animation engine that makes the impossible possible.

What happened to Framer Motion?

Motion for React is the direct successor for Framer Motion.

The original creator spun Framer Motion out from Framer in 2024.

As an independent project, it continues to power animations on Framer websites, as well as better catering to the web as a whole.

How do I migrate from Framer Motion?

Migrating is simple. Install "motion" and replace "framer-motion" in your project with "motion/react".

Does Motion support React Server Components?

Yes! Check out the motion component documentation for import instructions for use in React Server Component environments like Next.js.

Does Motion support server-side rendering?

Motion for React has supported server-sider rendering from day one. All animations defined on the server will be rendered in their correct initial positions.

What developer tools are available?

We're building a rich ecosystem of free and premium developer tools, such as:

With much more to come.

Do you have some starter examples?

Yes! Visit the Motion for React examples page for real-world React animation demos.

In the Fundamentals category you can find simple examples for animated layouts, scroll animations, gesture animations - all built with Motion for React.

What is Motion for React?

Motion for React is a performant animation library built specifically for React developers.

Its simple component-based API is easy to start and fun to master.

It offers fast animations built on native browser APIs, plus a industry-leading layout animation engine that makes the impossible possible.

What happened to Framer Motion?

Motion for React is the direct successor for Framer Motion.

The original creator spun Framer Motion out from Framer in 2024.

As an independent project, it continues to power animations on Framer websites, as well as better catering to the web as a whole.

How do I migrate from Framer Motion?

Migrating is simple. Install "motion" and replace "framer-motion" in your project with "motion/react".

Does Motion support React Server Components?

Yes! Check out the motion component documentation for import instructions for use in React Server Component environments like Next.js.

Does Motion support server-side rendering?

Motion for React has supported server-sider rendering from day one. All animations defined on the server will be rendered in their correct initial positions.

What developer tools are available?

We're building a rich ecosystem of free and premium developer tools, such as:

With much more to come.

Do you have some starter examples?

Yes! Visit the Motion for React examples page for real-world React animation demos.

In the Fundamentals category you can find simple examples for animated layouts, scroll animations, gesture animations - all built with Motion for React.

motion+

Advanced features

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

Upgrade to Motion+

Engagement stats

source

Typewriter

source

Engagement stats

source

100+ premium examples

A growing collection of high-quality examples that can be copy/pasted or edited with AI.

Power up VS Code

Edit and preview Motion for React bezier curves, directly in-editor.

# Motion

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

## Performance

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

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

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

Motion+

Private Discord

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

UI library integrations

Includes integration examples, starting with Radix.

Upgrade to Motion+

gallery

Motion Showcase

All the beautiful sites featured in the Framer Gallery are powered by Motion for React. Here are some more amazing interactions made by developers with its flexible APIs.