https://github.com/blackboxvision/styled-animation

😎 Helper that implements react-animations for styled-components
https://github.com/blackboxvision/styled-animation

animation library react react-animations styled-components

Last synced: about 1 month ago
JSON representation

😎 Helper that implements react-animations for styled-components

• Host: GitHub
• URL: https://github.com/blackboxvision/styled-animation
• Owner: BlackBoxVision
• License: mit
• Created: 2017-06-07T19:16:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-22T20:25:52.000Z (over 2 years ago)
• Last Synced: 2024-04-13T23:54:49.919Z (8 months ago)
• Topics: animation, library, react, react-animations, styled-components
• Language: TypeScript
• Homepage: https://BlackBoxVision.github.io/styled-animation/
• Size: 1.57 MB
• Stars: 21
• Watchers: 6
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Styled Animation [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Fstyled-animation.svg)](https://badge.fury.io/js/%40blackbox-vision%2Fstyled-animation) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/styled-animation/badge.svg)](https://snyk.io/test/github/blackboxvision/styled-animation)

Handle animations with style :sunglasses:. Check out the [demo](https://blackboxvision.github.io/styled-animation/).

## Installation

### YARN

```javascript

yarn add @blackbox-vision/styled-animation

```

### NPM

```javascript

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](http://react-animations.herokuapp.com/)

The usage is really simple:

```jsx

import React from 'react';

import ReactDOM from 'react-dom';

import { Animation } from '@blackbox-vision/styled-animation';

const Example = () => (

  

    Hey!, i'm animated!

  

);

ReactDOM.render(, document.getElementById('root'));

```

Also is possible to merge multiple animations, separating each animation name by a space:

```jsx

import React from 'react';

import ReactDOM from 'react-dom';

import { Animation } from '@blackbox-vision/styled-animation';

const Example = () => (

  Hey!, i'm mixed!

);

ReactDOM.render(, 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](https://github.com/BlackBoxVision/styled-animation/issues) 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](https://github.com/BlackBoxVision/styled-animation/blob/master/CONTRIBUTING.md) for more information.

## License

Distributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/styled-animation/blob/master/LICENSE) for more information.