Elemental components for doing animations in React
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.4.2/dist/animate-components.min.js"></script>- 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
asprop - Add all the html attributes supported by React along with component props.
- Ease of doing animations (purely component based).
- Simplified and minimal API.
- Best source for someone who is new to React.
- 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.
View the complete documentation here.
Below is a list of all available animations (Components).
BounceBounceUpBounceRightBounceLeftBounceDown
FadeInFadeInRightBigFadeInRightFadeInLeftBigFadeInLeftFadeInDownFadeInDownBigFadeInUpFadeInUpBig
FlipFlipInXFlipInYFlipOutXFlipOutY
LightOutLightIn
RotateInRotateRightRotateLeftRotateUpRightRotateUpLeft
SlideUpSlideDownSlideLeftSlideRight
FlashRollOutRollInRubberSwingZoomHingeHingeDropPulseExpandUpEntranceHatchStarWars
PDownPUpPLeftPRight
PuffOutPuffInVanishOutVanishIn
ExpanseUpExpanseDownExpanseLeftExpanseRight