Text Animations React

A React.js and typescript package that lets you animates text and add text effects with ease with ease

Installation

With Yarn:
``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 | |


!text-animations-react




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

!text-animations-react

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)`

Issues and Bugs

Let us know if you found a bug