@blackbox-vision/styled-animation v2.1.1

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:

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.