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

| Name props | Default | Type | Values | |-----------------|---------|-------|----------| | name | shake | String | names of animations | | duration | 2s | String | 1s, 300ms... | | timingFunction | linear | String | ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end | | delay | 0s | String | 1s, 300ms... | | iterationCount | infinite | String, Number | 0 , 1 , 3 , infinite | | direction | normal | String | normal, reverse, alternate, alternate-reverse | | fillMode | none | String | none, forwards, backwards, both| | playState | running | String | running, paused | | transformOrigin | center | String | center, 50%, top bottom, 10% 80% ...| | backfaceVisibility | hidden | String | hidden, visible | | opacity | 0 | Number | 0 -> 1 | | style | undefined | React.CSSProperties | | | children | Hello World | ReactNode |

Names of animations

For test all animation click here

| Attention Seekers | Specials | Flippers | LightSpeed | |--------------------|----------|----------|------------| | bounce | hinge | flip | lightSpeedInLeft | | flash | jackInTheBox | flipInX | lightSpeedInRight | | headShake | rollIn | flipInY | lightSpeedOutLeft | | heartBeat | rollOut | flipOutX | lightSpeedOutRight | | jello | | flipOutY | | pulse |
| rubberBand |
| shake | | shakeX | | shakeY | | swing | | tada | | wobble |

| BackEntrances | BackExits | BouncingEntrances | BouncingExits | |---------------|-----------|-------------------|---------------| | backInDown | backOutDown | bounceIn | bounceOut | | backInLeft | backOutLeft | bounceInDown | bounceOutDown | | backInRight | backOutRight | bounceInLeft | bounceOutLeft | | backInUp | backOutUp | bounceInRight | bounceOutRight | | | | bounceInUp | bounceOutUp |

| FadingEntrances | FadingExits | RotatingEntrances | RotatingExits | |-------------------|---------------|---------------------|-----------------| | fadeIn | fadeOut | rotateIn | rotateOut | fadeInBottomLeft | fadeOutBottomLeft | rotateInDownLeft | rotateOutDownLeft | fadeInBottomRight | fadeOutBottomRight | rotateInDownRight | rotateOutDownRight | fadeInDown | fadeOutDown | rotateInUpLeft | rotateOutUpLeft | fadeInDownBig | fadeOutDownBig | rotateInUpRight | rotateOutUpRight | fadeInLeft | fadeOutLeft | fadeInLeftBig | fadeOutLeftBig | fadeInRight | fadeOutRight | fadeInRightBig | fadeOutRightBig | fadeInTopLeft | fadeOutTopLeft | fadeInTopRight | fadeOutTopRight | fadeInUp | fadeOutUp | fadeInUpBig | fadeOutUpBig

| SlidingEntrances | SlidingExits | ZoomingEntrances | ZoomingExits | |--------------------|----------------|--------------------|----------------| | slideInDown | slideOutDown | zoomIn | zoomOut | slideInLeft | slideOutLeft | zoomInDown | zoomOutDown | slideInRight | slideOutRight | zoomInLeft | zoomOutLeft | slideInUp | slideOutUp | zoomInRight | zoomOutRight | | | zoomInUp | zoomOutUp

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)