framer-motion

Motion for React

An open source animation library
for React

npm install motion

Table of Contents

• Why Motion?
• 🍦 Platforms
• 🎓 Examples
• ⚡️ Motion+
• 👩🏻‍⚖️ License
• 💎 Contribute
• ✨ Sponsors

Why Motion?

• Simple API: First-class React, JavaScript, and Vue packages.
• Hybrid engine: Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
• Production-ready: TypeScript, extensive test suite, tree-shakable, tiny footprint. Batteries included: Gestures, springs, layout transitions, scroll-linked effects, timelines.

🍦 Platforms

Motion is available for React, JavaScript and Vue.

React

import { motion } from "motion/react"

function Component() {
    return <motion.div animate={{ x: 100 }} />
}

Get started with Motion for React.

JavaScript

import { animate } from "motion"

animate("#box", { x: 100 })

Get started with JavaScript.

Vue

<script>
    import { motion } from "motion-v"
</script>

<template> <motion.div :animate={{ x: 100 }} /> </template>

Get started with Motion for Vue.

🎓 Examples

Browse 100+ free and 180+ premium Motion Examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

⚡️ Motion+

A one-time payment, lifetime-updates membership:

• 180+ premium examples
• Premium APIs like Cursor and Ticker
• Visual editing for VS Code (alpha)
• Private Discord
• Early access content

Get Motion+

👩🏻‍⚖️ License

• Motion is MIT licensed.

💎 Contribute

• Want to contribute to Motion? Our contributing guide has you covered.

✨ Sponsors

Motion is sustainable thanks to the kind support of its sponsors.

Become a sponsor

Partner

Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.

Platinum

Gold

Silver

Personal

• OlegWock
• Lambert Weller
• Jake LeBoeuf
• Han Lee

Changelog

[12.23.24] 2025-10-10

Fixed

• Ensure that when a component remounts, it continues to fire animations even when initial={false}.

Similar packages

Other packages similar to framer-motion

react-spring

React-spring is a spring-physics based animation library that allows for a wide range of animations in React applications. It is similar to framer-motion in that it provides a way to create animations, but it uses spring physics for a more natural motion. React-spring is more focused on physics-based animations, whereas framer-motion offers a wider range of animation utilities, including gesture handling and drag.

react-motion

React-motion is another animation library for React that provides a powerful way to create animations using spring configurations. It is less declarative and more configuration-based compared to framer-motion, which might be preferred by developers who want more control over the animation physics.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript animation library that works well with React and other frameworks. It is not specifically designed for React like framer-motion, but it offers a wide range of animation capabilities and fine-grained control over animations. GSAP is known for its performance and flexibility, but it has a steeper learning curve compared to framer-motion.

animejs

Anime.js is a lightweight JavaScript animation library that can be used with any web framework, including React. It is similar to framer-motion in terms of providing a simple API for animations, but it does not offer React-specific features like framer-motion does. Anime.js is a good choice for developers looking for a general-purpose animation library that is easy to use and extend.