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.
Framer Motion
An open source motion library for React, made by Framer.
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:
...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
💎 Contribute
👩🏻⚖️ License
- Framer Motion is MIT licensed.
✨ Framer