Handle animations with style 😎. Check out the demo.
yarn add @blackbox-vision/styled-animationnpm install --save @blackbox-vision/styled-animationIf you need to integrate react-animations and styled-components, this library solves the problem giving you an Animation component ready for you to use.
Styled-animation supports all the animations provided by react-animations
The usage is really simple:
import React from 'react';
import ReactDOM from 'react-dom';
import { Animation } from '@blackbox-vision/styled-animation';
const Example = () => (
<Animation name="fadeOutDown" duration="2s" timing="ease-out">
Hey!, i'm animated!
</Animation>
);
ReactDOM.render(<Example />, document.getElementById('root'));Also is possible to merge multiple animations, separating each animation name by a space:
import React from 'react';
import ReactDOM from 'react-dom';
import { Animation } from '@blackbox-vision/styled-animation';
const Example = () => (
<Animation name="shake bounce">Hey!, i'm mixed!</Animation>
);
ReactDOM.render(<Example />, document.getElementById('root'));Animation component use the following props:
| Properties | Types | Default Value | Description |
|---|---|---|---|
| name | string | none | Name or names of the animations to start. |
| duration | string | none | Indicates the duration of the Animation. |
| timing | string | none | Indicates the timing of the animation. |
| fillMode | string | none | Indicates the animation-fill-mode value. |
| onStart | Function | none | Callback called when the animation keyframes start. |
| onEnd | Function | none | Callback called when the animation keyframes finish. |
Please, open an issue following one of the issues templates. We will do our best to fix them.
If you want to contribute to this project see contributing for more information.
Distributed under the MIT license. See LICENSE for more information.