@alitinart/react-animate NPM

@alitinart/react-animate

Animate your react components with ease

Install

npm install --save @alitinart/react-animate

Usage

import React, { Component } from 'react'

import Animate from '@alitinart/react-animate'
import '@alitinart/react-animate/dist/index.css'

class Example extends Component {
  render() {
    return (
      <Animate
        animationDuration='2s'
        animationName='slideRight'
        classToGive='animation-started'
        customAnimationClass='myCustomAnimation'
      >
        <h1>Hello World 😁</h1>
      </Animate>
    )
  }
}

Creating your own custom animation

index.tsx

import React, { Component } from 'react'

import Animate from '@alitinart/react-animate'
import '@alitinart/react-animate/dist/index.css'

class Example extends Component {
  render() {
    return (
      <Animate
        animationDuration='2s'
        classToGive='animation-started'
        customAnimationClass='customAnimation' // <--- Your custom animation class goes here
      >
        <h1>Hello World 😁</h1>
      </Animate>
    )
  }
}

index.css

/* Creating Custom Animation */

.customAnimation {
  animation: customAnimation;
}

@keyframes customAnimation {
  0%{
    transform: translateY(100px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

Props

Prop Name	Description	Usage
animationDuration	Amount of time needed to run that animation	animationDuration='2s or 2ms'
animationName	Select one of the pre made animations of this library	animationName='slideRight or slideLeft or fadeIn'
classToGive	Select a class that is given to your element once it enters the screen	classToGive='animation-started'
customAnimationClass	Select your own animation by class	customAnimationClass='myCustomAnimation'