https://github.com/kazuma512/react-animations

React Animations is a library of customizable animations for React components. It provides a simple way to add visually appealing transitions and animations to your app, without having to spend hours writing your own CSS animations.
https://github.com/kazuma512/react-animations

animation css javascript library npm shinobi uchiha

Last synced: 1 day ago
JSON representation

React Animations is a library of customizable animations for React components. It provides a simple way to add visually appealing transitions and animations to your app, without having to spend hours writing your own CSS animations.

• Host: GitHub
• URL: https://github.com/kazuma512/react-animations
• Owner: kazuma512
• Created: 2023-06-03T12:08:17.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-06-03T12:08:47.000Z (over 1 year ago)
• Last Synced: 2024-04-13T13:31:04.148Z (7 months ago)
• Topics: animation, css, javascript, library, npm, shinobi, uchiha
• Language: JavaScript
• Homepage: https://animate.style/
• Size: 110 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-animations

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from [animate.css](https://daneden.github.io/animate.css/).

[Check out the interactive demo](http://react-animations.herokuapp.com/).

### Usage

You can import each animation directly from the main package

```js

import { fadeIn } from 'react-animations'

```

or you can import a specific animation directly

```js

import fadeIn from 'react-animations/lib/fade-in'

```

### Usage with Radium

```js

import { bounce } from 'react-animations';

import Radium from 'radium';

const styles = {

  bounce: {

    animation: 'x 1s',

    animationName: Radium.keyframes(bounce, 'bounce')

  }

}

```

### Usage with Aphrodite

```js

import { bounce } from 'react-animations';

import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({

  bounce: {

    animationName: bounce,

    animationDuration: '1s'

  }

})

```

### Usage with JSS

```js

import { bounce } from 'react-animations';

import jss from 'jss'

import preset from 'jss-preset-default'

jss.setup(preset())

const {classes} = jss.createStyleSheet({

  '@keyframes bounce': bounce,

  bounce: {

    animationName: 'bounce',

    animationDuration: '1s',

  },

}).attach()

```

## Animations

Below is a list of all available animations

`bouceOut`

`bounce`

`bounceIn`

`bounceInDown`

`bounceInLeft`

`bounceInRight`

`bounceInUp`

`bounceOutDown`

`bounceOutLeft`

`bounceOutRight`

`bounceOutUp`

`fadeIn`

`fadeInDown`

`fadeInDownBig`

`fadeInLeft`

`fadeInLeftBig`

`fadeInRight`

`fadeInRightBig`

`fadeInUp`

`fadeInUpBig`

`fadeOut`

`fadeOutDown`

`fadeOutDownBig`

`fadeOutLeft`

`fadeOutLeftBig`

`fadeOutRight`

`fadeOutRightBig`

`fadeOutUp`

`fadeOutUpBig`

`flash`

`flip`

`flipInX`

`flipInY`

`flipOutX`

`flipOutY`

`headShake`

`hinge`

`jello`

`lightSpeedIn`

`lightSpeedOut`

`pulse`

`rollIn`

`rollOut`

`rotateIn`

`rotateInDownLeft`

`rotateInDownRight`

`rotateInUpLeft`

`rotateInUpRight`

`rotateOut`

`rotateOutDownLeft`

`rotateOutDownRight`

`rotateOutUpLeft`

`rotateOutUpRight`

`rubberBand`

`shake`

`slideInDown`

`slideInLeft`

`slideInRight`

`slideInUp`

`slideOutDown`

`slideOutLeft`

`slideOutRight`

`slideOutUp`

`swing`

`tada`

`wobble`

`zoomIn`

`zoomInDown`

`zoomInLeft`

`zoomInRight`

`zoomInUp`

`zoomOut`

`zoomOutDown`

`zoomOutLeft`

`zoomOutRight`

`zoomOutUp`

## Merge

react-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations.

```js

import { merge, tada, flip } from 'react-animations';

const tadaFlip = merge(tada, flip);

```