@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