A variety of text animations ready to be applied.
npm i react-text-animations
import TextAnimation from "react-text-animations";
const AnimatedText = () => {
return (
<TextAnimation.Slide target="Merciful" text={['Gracious', 'Peace', 'Knowing']}>
Allah is The Merciful
</TextAnimation.Slide>
)
}
export default AnimatedText;
You can choose from a bunch of animations by typing TextAnimation.animationName
, In the example above we used the Slide animation. Below is a list of the animations that can be used.
Animations are separated to 2 types :
-
Word
- Push
- Flip
- Clip
- Slide
- Zoom
-
Letter
- Rotate1
- Rotate2
- Scale
Please feel free to suggest better names
For more flexibility, you can play with the animation properties, these properties are declared in the animation prop. <TextAnimation.Slide animation={{delay:1000}}>
Prop | Description |
---|---|
animation.delay | how long to wait between transitions in millisecond |
animation.duration | how long a transition will take in millisecond |
animation.timingFunction | how the animation progresses through the animation e.g(ease-in) |
cname | use this className to add your custom styling |
id | adding an id is also recommended for multiple text animations in a page. |
loop | set it to false if you want the animation to run once |
<TextAnimation.Slide
target="Merciful"
text={['Gracious', 'Peace', 'Knowing']}
cname="textAnimation"
id="textAnimation__slide"
animation={{
duration:1000,
delay:2000,
timingFunction:'ease-out',
}}
loop={false}
>
Allah is The Merciful
</TextAnimation.Slide>