Elemental components for doing animations in React
npm
npm install animate-components --save
yarn
yarn add animate-components
- Component based
- Supports all the animation properties
- Use with styled-components, Aphrodite and glamor
- Create a new animation using
<Merge /> - Isolated keyframes
- Ratifies DOM nesting
- Element type rendering of components using
asprop - Add all the html attributes supported by React along with component props.
- Render a component in isolation and apply animations on it.
- 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.
Enough ?
Check the complete documentation here.
Below is a list of all available animations.
BounceBounceUpBounceRightBounceLeftBounceDown
FadeInFadeInUpFadeInRightFadeInLeftFadeInDownFadeInUpBigFadeInLeftBigFadeInRightBig
FlipFlipXFlipY
LightOutLightIn
RotateInRotateRightRotateLeftRotateUpRightRotateUpLeft
SlideUpSlideDownSlideLeftSlideRight
FlashRollOutRollInRubberSwingZoomHingePulseExpandUpEntranceHatch
PDownPUpPLeftPRight
PuffOutPuffInVanishOutVanishIn
ExpanseUpExpanseDownExpanseLeftExpanseRight