react-text-style-animations
v1.1.11
Published
A Simple and Flexible Way to add Eye catching Text Animations - Forked from dawoodsa
Downloads
6
Maintainers
Readme
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>