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-styledor via npm:
$ npm install animate-styled --saveBasic 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)