React Transition Group
react-transition-group
A react component toolset for managing animations
Animation
react
transition
addons
transition-group
animation
css
transitions
react-transition-group
javascript
npm
Stars
10k
Weekly
28M
Open issues
258
Bundle
~15 kB
Installation
npm install react-transition-groupCode example
import { motion } from "react-transition-group";
export function Example() {
return (
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.35 }}
>
<h2>Animated with React Transition Group</h2>
</motion.div>
);
}Pros & cons
Pros
- Actively maintained by koba04
- 28M weekly downloads. Battle tested
- BSD-3-Clause licensed
Considerations
- Adds roughly ~15 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 258 open issues on GitHub