Nope, prefer mopeds.

    react-animations
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-animations package

    1.0.0 • Public • Published

    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.

    Check out the interactive demo.

    Usage

    You can import each animation directly from the main package

    import { fadeIn } from 'react-animations'

    or you can import a specific animation directly

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

    Usage with Radium

    import React from 'react';
    import { bounce } from 'react-animations';
    import Radium, {StyleRoot} from 'radium';
     
    const styles = {
      bounce: {
        animation: 'x 1s',
        animationName: Radium.keyframes(bounce, 'bounce')
      }
    }
     
    class Test extends React.Component {
      render() {
        <StyleRoot>
          <div className="test" style={styles.bounce}>
          </div>
        </StyleRoot>
      }
    }
     

    Usage with Aphrodite

    import { bounce } from 'react-animations';
    import { StyleSheet, css } from 'aphrodite';
     
    const styles = StyleSheet.create({
      bounce: {
        animationName: bounce,
        animationDuration: '1s'
      }
    })

    Usage with JSS

    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()

    Usage with styled-components

    import styled, { keyframes } from 'styled-components';
    import { bounce } from 'react-animations';
     
    const bounceAnimation = keyframes`${bounce}`;
     
    const BouncyDiv = styled.div`
      animation: 1s ${bounceAnimation};
    `;

    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.

     
    import { merge, tada, flip } from 'react-animations';
    const tadaFlip = merge(tada, flip);

    Install

    npm i react-animations

    DownloadsWeekly Downloads

    28,839

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • ceceppa
    • robwalkerco
    • gksander
    • sarahformidable
    • scott-rippey
    • yankovalera
    • valgeorgiev
    • michaelmerrill
    • sarmeyer
    • mariano-formidable
    • carlospaelinck
    • ryan.roemer
    • formidable-owner
    • eastridge
    • exogen
    • beccanelson
    • philpl
    • jmcbee1
    • formidablelabs
    • carbonrobot
    • manosim
    • masiddee
    • aweary