Styled Animation

Handle animations with style 😎. Check out the demo.

Installation

YARN

yarn add @blackbox-vision/styled-animation

NPM

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

Use case

If you need to integrate react-animations and styled-components, this library solves the problem giving you an Animation component ready for you to use.

Usage

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'));

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.