Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Styled Animation npm version License: MIT Known Vulnerabilities

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.