Animate Components
Elemental components for doing animations in React
Install
npm
npm install animate-components
yarn
yarn add animate-components
The UMD build is also available on unpkg:
<script src="https://unpkg.com/animate-components@1.1.9/dist/animate-components.min.js"></script>
Features
- Component based
- Supports all the animation properties
- Merge two animations to create one
- Isolated keyframes (use with styled-components, aphrodite and glamor) provided by
animate-keyframes
- Ratifies DOM nesting
- Element type rendering of components using
as
prop - Add all the html attributes supported by React along with component props.
Why ?
- Ease of doing animations (purely component based).
- Simplified and minimal API.
- Best source for someone who is new to React (folks are already enjoying the ease of doing animations).
- Supports element type rendering of an animation component (interesting tweak).
- Provides isolated keyframes so that you don't have to hardcode all the curves and directly use them with css-in-js solutions like glamor, styled-components, Aphrodite etc.
Tasks
Tasklist
Docs
View the complete documentation here.
Animations
Below is a list of all available animations (Components).
Bounce
Bounce
BounceUp
BounceRight
BounceLeft
BounceDown
Fade
FadeIn
FadeInRightBig
FadeInRight
FadeInLeftBig
FadeInLeft
FadeInDown
FadeInDownBig
FadeInUp
FadeInUpBig
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
StarWars
🚀 New
Perspective
Bingo
PuffOut
PuffIn
VanishOut
VanishIn
Expanse (in space)
ExpanseUp
ExpanseDown
ExpanseLeft
ExpanseRight
Other animation libraries (css)