animation

A React component implementing the latest version of Animate.css

Aug 10, 2021
A React component implementing the latest version of Animate.css

react-animatecss

A React component implementing the latest version of Animate.css!

  • Zero dependencies - All self contained code
  • Minimal package size - <7 kB gzipped
  • No messy installation - A simple way to add motion to your react components

View Demo View Github

Installation

# with npm npm install @charlesvien/react-animatecss # with yarn yarn add @charlesvien/react-animatecss

Documentation

The official Animate.css documentation can be found at https://animate.style. You can view a list of all animations that your able to use with this component on their website.

Usage

This is a basic example showing how to add a fadeIn and fadeOut animation to a component.

NOTE: In order for the fadeOut animation to occur, instead of conditionally rendering the component you must pass false to the visible prop when the component should no longer be visible.

import Animate from '@charlesvien/react-animatecss'; <Animate animationIn="fadeIn" animationOut="fadeOut" inDuration={1000} outDuration={1000} visible > Magnolia </Animate>

API

PropTypeDefaultDescription
animationInstringfadeInThe animation name to be played when the component turns visible
animationOutstringfadeOutThe animation name to be played when the component turns invisible
inDelaynumber0The delay before the visible animation is played
outDelaynumber0The delay before the invisible animation is played
inDurationnumber1000The duration the visible animation is played
outDurationnumber1000The duration the invisible animation is played
repeatnumber0How many times the animation repeats (min: 1, max: 3)
onMountbooleantrueIf the animation should play when the component is first mounted
visiblebooleantrueIf the Animate component should be visible
loopbooleanfalseIf the animation should infinitely loop
styleobjectundefinedAdditional optional css properties to apply to the Animate container

Development

Contributions are welcome to react-animatecss!

To set up the project:

  1. Fork and clone the repository
  2. $ yarn
  3. $ yarn dev

Storybook will then be served on http://localhost:6006/ in watch mode, meaning you don't have refresh the page to see your changes.

Recommended