Skip to content
😎 Helper that implements react-animations for styled-components
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github refactor: rename Example to Storybook Mar 17, 2019
.storybook feat: update storybook to v5.0.2, customize fonts, add addon-info Mar 17, 2019
src fix: dispose element reference in componentWillUnmount for faster gc Mar 17, 2019
stories feat: move to ts, add pika support and update storybook #6 #9 #10 #11 Mar 17, 2019
test feat: move to ts, add pika support and update storybook #6 #9 #10 #11 Mar 17, 2019
.babelrc feat: move to ts, add pika support and update storybook #6 #9 #10 #11 Mar 17, 2019
.eslintrc.js feat: move to ts, add pika support and update storybook #6 #9 #10 #11 Mar 17, 2019
.gitignore feat: add support to deploy storybook to gh-pages #12 Mar 17, 2019
.prettierrc.js feat: move to ts, add pika support and update storybook #6 #9 #10 #11 Mar 17, 2019
CHANGELOG.md
CONTRIBUTING.md chore: add contributing.md #8 Mar 17, 2019
LICENSE Initial commit Jun 7, 2017
README.md chore: minor changes in README.md Mar 17, 2019
commitlint.config.js feat: move to ts, add pika support and update storybook #6 #9 #10 #11 Mar 17, 2019
package-lock.json feat: update storybook to v5.0.2, customize fonts, add addon-info Mar 17, 2019
package.json feat: update storybook to v5.0.2, customize fonts, add addon-info Mar 17, 2019

README.md

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.

You can’t perform that action at this time.