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

Framer Motion

An open source motion library for React, made by Framer.

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

---

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

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
• Hardware-accelerated animations
• Orchestrate animations across components
• CSS variables

...and a whole lot more.

Get started

🐇 Quick start

Install framer-motion with via your package manager:

npm install framer-motion

Then import the motion component:

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

📚 Docs

• Check out our documentation for guides and a full API reference.
• Or see our examples for inspiration.

💎 Contribute

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

👩🏻‍⚖️ License

• Framer Motion is MIT licensed.

✨ Framer

• Design and publish sites that inspire. Try Framer for free.

Changelog

[11.2.9] 2024-05-29

Fixed

• Fixing animation of CSS variables when leading space is present.