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/[email protected]/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.
• 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

• Flip
• FlipInX
• FlipInY
• FlipOutX
• FlipOutY

LightSpeed

• LightOut
• LightIn

Rotate

• RotateIn
• RotateRight
• RotateLeft
• RotateUpRight
• RotateUpLeft

Slide

• SlideUp
• SlideDown
• SlideLeft
• SlideRight

Special

• Flash
• RollOut
• RollIn
• Rubber
• Swing
• Zoom
• Hinge
• HingeDrop
• Pulse
• ExpandUp
• Entrance
• Hatch
• StarWars

🚀 New

Perspective

• PDown
• PUp
• PLeft
• PRight

Bingo

• PuffOut
• PuffIn
• VanishOut
• VanishIn

Expanse (in space)

• ExpanseUp
• ExpanseDown
• ExpanseLeft
• ExpanseRight

Other animation libraries (css)

• Animate.css
• CSShake
• Magic