framer-motion

What is framer-motion?

The framer-motion npm package is a popular library for creating animations and transitions in React applications. It provides a powerful and easy-to-use set of tools for animating components, handling gestures, and creating complex motion effects with simple declarative syntax.

What are framer-motion's main functionalities?

Basic Animations

Animate the horizontal position of a component to 100 pixels.

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

Variants

Use variants to define animation states and transition between them.

{"<motion.div variants={variants} initial='hidden' animate='visible' />"}

Gestures

Scale a button up on hover and down on tap.

{"<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} />"}

Drag

Make a component draggable.

{"<motion.div drag />"}

Shared Layout Animations

Animate layout changes between components that share a layoutId.

{"<motion.ul layout><motion.li layoutId='id' /></motion.ul>"}

Exit Animations

Animate the component out when it's removed from the React tree.

{"<motion.div exit={{ opacity: 0 }} />"}

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.

README

Motion for React

---

Motion for React is an open source, production-ready library that’s designed for all creative developers.

It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.

It looks like this:

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

It does all this:

• Springs
• Keyframes
• Layout animations
• Shared layout animations
• Gestures (drag/tap/hover)
• Scroll animations
• SVG paths
• Exit animations
• Server-side rendering
• Independent transforms
• Orchestrate animations across components
• CSS variables

...and a whole lot more.

Get started

🐇 Quick start

Install motion via your package manager:

npm install motion

Then import the motion component:

import { motion } from "motion/react"

export function Component({ isVisible }) {
    return <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
}

💎 Contribute

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

👩🏻‍⚖️ License

• Motion for React is MIT licensed.

✨ Sponsors

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

Partners

Framer

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

Platinum

Gold

Silver

Personal

• Nusu
• OlegWock
• Lambert Weller
• Jake LeBoeuf
• Han Lee

Changelog

[11.15.0] 2024-12-13

Added

• Add support for repeat in animation sequences.

Fixed

• Clearing scheduled jobs at the end of an animation frame to ensure memory is released should the animation loop settle.