Get Started

Requirements

• node
• yarn

Installation

You can use either npm

npm i @gfazioli/react-animatecss

or yarn

yarn add @gfazioli/react-animatecss

Combine

Of course, you can combine different animation effects as well

<Zoom animate={both} onAnimationEnd={() => setBoth(false)}>
  <RubberBand animate={both} onAnimationEnd={() => setBoth(false)}>
    <h1>RubberBand + Zoom</h1>
  </RubberBand>
</Zoom>

onAnimationEnd

You may use the onAnimationEnd event to detect when an animation is completed. This is useful to reset the animate prop

Mix your animation

Agnostic HTML tag

Currently, the default container for all animations is a span with display: inline-block. You may easly override this behaviour by using the as property:

<h1>
  Say Hello to React
  <Bounce animate={true} as="div">
    AnimateCSS
  </Bounce>
</h1>

<h1>
  Say Hello to React
  <Bounce animate={true} as="h6">
    AnimateCSS
  </Bounce>
</h1>

Display block

Now, you can override the display: inline-bock in two ways. The first on is by using the new propery block

<h1>
  Say Hello to React
  <Bounce animate={true} block>
    AnimateCSS
  </Bounce>
</h1>

The above will display a span in display: bock. You may also use the styled-component:

const BounceAnimation = styled(Bounce).attrs({ as: "div" })`
  display: block;
`;

See demo below

Complete example

Credits

This package is based of Animate.css