A React.js and typescript package that lets you animates text and add text effects with ease with ease
npm install text-animations-reactA React.js and typescript package that lets you animates text and add text effects with ease with ease
bash
Yarn add text-animations-react
`
With npm:
`bash
npm install --save text-animations-react
`
Usage
The text animations are divided into two,the special animations which is imported as Special and the regular animation with is imported as TextAnim
see an example below:
`bash
//import as special animation
import {Special} from "text-animations-react"//import as regular animation
import {TextAnim} from "text-animations-react"
`
The difference between the two is that the TextAnim animations is more configurable than Special animations$3
`bash
import {TextAnim} from "text-animations-react" function App() {
return (
size={6} type="bounceone"
color="orange"
count="infinite"
duration={1}/>
)
}
`regular animation i.e TextAnim
| types | Implementation |
| -------|:------------------------------------------------------------------------------------------------:|
| bounceone|
|
| reveal | |
| pulse | |
| rubberband| |
| shake | |
| wobble | |
| flip | |
| lightspeed | |
| rollin | |
| rotatein | |
| hinge | |
| gradientone | |
| flipvertical | |
| goup | |
| fromtop | |
| popoutin | |
| glitchhop | |
| swing | |
| shadows | |
special animation i.e Special
| types | Implementation |
| -------|:-------------------------------------------------------------------------------------------------:|
| specialone|
|
| specialtwo | |
| specialthree | |
| specialfour| |
| one | |
| three | |
| four | |>>Notice: The Specialone and Specialthree type can only animate five(5) characters
All Properties
| Property | Type | Description |
|------- |:------------:| :--------------------------------------------------------------: |
|types |
string | Sets the size of the text |
|color | string |Sets the color of the text (color name , hexadecimal) |
|name | string | Sets the value of the text |
|top | number |Lets you move the text like a margin-top CSS property would |
|right | number |Lets you move the text like a margin-right CSS property would |
|bottom | number |Lets you move the text like a margin-bottom CSS property would |
|left | number |Lets you move the text like a margin-left CSS property would |
|duration| number |Sets the animation duration |
|delay | number |Sets a delay for the animation |
|count | string |Sets how many times you want the animatiuon to run |
|size | number |Sets the size of the text |
|grad1 | string |This property can only with the "gradientone" type sets the color to be animated (color name,hex) |
|grad2 | string |This property can only with the "gradientone" type sets the color to be animated (color name,hex)
|grad3 | string |This property can only with the "gradientone" type sets the color to be animated (color name,hex)
|grad4 | string |This property can only with the "gradientone" type sets the color to be animated (color name,hex)`Let us know if you found a bug