Styled Animation

Handle animations with style :sunglasses:. Check out the demo.

Installation

YARN

yarn add @blackbox-vision/styled-animation

NPM

npm install --save @blackbox-vision/styled-animation

Usage

Styled-animation supports all the animations provided by react-animations

The usage is really simple:

import { Animation } from '@blackbox-vision/styled-animation';
import React from 'react';
import ReactDOM from 'react-dom';

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 { Animation } from '@blackbox-vision/styled-animation';
import React from 'react';
import ReactDOM from 'react-dom';

const Example = () => (
  <Animation name="shake bounce">Hey!, i'm mixed!</Animation>
);

ReactDOM.render(<Example />, document.getElementById('root'));

Props

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. |

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.