npm

Need private packages and team management tools?Check out npm Orgs. »

animate-components

1.4.8 • Public • Published

Animate Components

website version gzip size

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.4.2/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)

install

npm i animate-components

Downloadsweekly downloads

426

version

1.4.8

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability