@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' |

License

MIT © alitinart