Animate Components
Elemental components for doing animations in React
Install
npm
npm install animate-components --save
yarn
yarn add animate-components --save
Features
- Component based.
- Supports all the animation properties
- Use with styled-components, Aphrodite and glamor
- Create a new animation using
<Merge />
(Experimenting) - Isolated keyframes
- Validate DOM nesting
- Element type rendering of components using
as
prop.
Caveats
- No cdn yet
- Build size (large but no so much, ~60KB)
Docs
Check the complete documentation here.
Animations
Below is a list of all available animations.
Bounce
Bounce
BounceUp
BounceRight
BounceLeft
BounceDown
Fade
FadeIn
FadeInUp
FadeInRight
FadeInLeft
FadeInDown
FadeInUpBig
FadeInLeftBig
FadeInRightBig
Flip
LightSpeed
Rotate
RotateIn
RotateRight
RotateLeft
RotateUpRight
RotateUpLeft
Slide
SlideUp
SlideDown
SlideLeft
SlideRight
Special
Flash
RollOut
RollIn
Rubber
Swing
Zoom
Hinge
Pulse
ExpandUp
Entrance
Hatch
🚀 New
Perspective
Bingo
PuffOut
PuffIn
VanishOut
VanishIn
Expanse (in space)
ExpanseUp
ExpanseDown
ExpanseLeft
ExpanseRight
Other animation libraries (css)