Framer Motion
framer-motion
A simple and powerful JavaScript animation library
Animation
react animation
react
pose
react pose
animation
gestures
drag
spring
popmotion
framer
Stars
34k
Weekly
0
Open issues
108
Bundle
~60 kB
Installation
npm install framer-motionCode example
import { motion } from "framer-motion";
export function Example() {
return (
<motion.button
type="button"
initial={{ scale: 0.95, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
whileTap={{ scale: 0.97 }}
>
Animate
</motion.button>
);
}Pros & cons
Pros
- Actively maintained by Matt Perry
- 0 weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~60 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 108 open issues on GitHub