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 />
- Isolated keyframes
- Validate DOM nesting
- Element type rendering of components using
as
prop - Add all the html attributes supported by React along with component props.
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
Flip
FlipX
FlipY
LightSpeed
LightOut
LightIn
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
PDown
PUp
PLeft
PRight
Bingo
PuffOut
PuffIn
VanishOut
VanishIn
Expanse (in space)
ExpanseUp
ExpanseDown
ExpanseLeft
ExpanseRight