animate-styled v3.0.3

AnimateStyled

small contribution for those who work with react and styled-components

AnimateStyled is just a library based on the great work done by the people of animate.css led to the stack of react and styled-components.

Installation

via yarn, just follow these simple commands:

$ yarn add animate-styled

or via npm:

$ npm install animate-styled --save

Basic use

import in your file js

...
import { AnimateStyled } from "animate-styled"
...
render(){
  return(
    <AnimateStyled name="hinge">
      <h1>Mi contenido</h1>   /* children is required */
    </AnimateStyled>
  )
}

Properties

Names of animations

For test all animation click here

Import multiple animations

import { AnimateStyled } from "animate-styled";
...
render(){
  return(
    <div>
      <AnimateStyled name="rollIn">
        <h1>My Content</h1>
      </AnimateStyled>
      <AnimateStyled name="zoomOut">
        <p>My Content</p>
      </AnimateStyled>
      <AnimateStyled name="slideOutUp">
        <img src="image/logo.png"/>
      </AnimateStyled>
    </div>
  )
}

Using All Properties

<AnimateStyled
  name="flip"
  duration="600ms"
  timingFunction="ease-in-out"
  delay="200ms"
  iterationCount={3}
  direction="alternate"
  fillMode="forwards"
  playState="running"
  transformOrigin="center top"
  backfaceVisibility="visible"
>
  {children}
</AnimateStyled>

Other uses

Nesting

<AnimateStyled name="flip">
  <AnimateStyled
    name="zoomOutUp"  
    iterationCount="infinite"
    timingFunction="ease-in">
    <h1>  Mundo</h1>
  </AnimateStyled>
</AnimateStyled>

License

AnimateStyled is licensed under the MIT license. (http://opensource.org/licenses/MIT)