1.1.10 • Published 2 years ago
react-text-animations v1.1.10
react-text-animations
A variety of text animations ready to be applied.
Installation
npm i react-text-animations
Basic Usage
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 List
Animations are separated to 2 types :
Word
- Push
- Flip
- Clip
- Slide
- Zoom
Letter
- Rotate1
- Rotate2
- Scale
Please feel free to suggest better names
Properties
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>