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:

Yarn add text-animations-react

With npm:

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:

//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

Example

import {TextAnim} from "text-animations-react"

 function App() {
   return (
     <TextAnim name="Cool Animation Libary" 
     size={6} type="bounceone"
      color="orange"
      count="infinite"
       duration={1}/>
   )
 }

regular animation i.e TextAnim

types	Implementation
bounceone	<TextAnim name="Cool" type="bounceone" color="orange" size={3} count="infinite" duration={2}/>
reveal	<TextAnim name="Cool" type="reveal" color="orange" size={3} count="infinite" duration={4}/>
pulse	<TextAnim name="Cool" type="pulse" color="orange" size={3} count="infinite" duration={1}/>
rubberband	<TextAnim name="Cool" type="rubberband" color="orange" size={3} count="infinite" duration={2}/>
shake	<TextAnim name="Cool" type="shake" color="orange" size={3} count="infinite" duration={2}/>
wobble	<TextAnim name="Cool" type="wobble" color="orange" size={3} count="infinite" duration={2}/>
flip	<TextAnim name="Cool" type="flip" color="orange" size={3} count="infinite" duration={2}/>
lightspeed	<TextAnim name="Cool" type="lightspeed" color="orange" size={3} count="infinite" duration={2}/>
rollin	<TextAnim name="Cool" type="rollin" color="orange" size={3} count="infinite" duration={2} />
rotatein	<TextAnim name="Cool" type="rotatein" color="orange" size={3} count="infinite" duration={2} />
hinge	<TextAnim name="Cool" type="hinge" color="orange" size={3} count="infinite" duration={2} />
gradientone	<TextAnim name="Cool" type="gradientone" grad1="red" grad2="blue" grad3="green" grad4="yellow" size={3} count="infinite" duration={2} />
flipvertical	<TextAnim name="Cool" type="flipvertical" color="orange" size={3} count="infinite" duration={2} >
goup	<TextAnim name="Cool" type="goup" color="orange" size={3} count="infinite" duration={2} />
fromtop	<TextAnim name="Cool" type="fromtop" color="orange" size={3} count="infinite" duration={2} >
popoutin	<TextAnim name="Cool" type="popoutin" color="orange" size={3} count="infinite" duration={2} />
glitchhop	<TextAnim name="Cool" type="glitchhop" color="orange" size={3} count="infinite" duration={2} />
swing	<TextAnim name="Cool" type="swing" color="orange" size={3} count="infinite" duration={2} />
shadows	<TextAnim name="Cool" type="shadows" color="orange" size={3} count="infinite" duration={2} />

special animation i.e Special

types	Implementation
specialone	<Special name="Nice" type="specialone" color="white" size={4} count="infinite" duration={2}/>
specialtwo	<Special name="Cool" type="specialtwo" color="orange" size={3} count="infinite" duration={4}/>
specialthree	<Special name="Cool" type="specialthree" color="orange" size={3} count="infinite" duration={2}/>
specialfour	<Special name="Cool" type="specialfour" color="orange" size={3} count="infinite" duration={2}/>
one	<Special name="Cool" type="one" color="orange" size={3} count="infinite" duration={2}/>
three	<Special name="Cool" type="three" color="orange" size={3} count="infinite" duration={2}/>
four	<Special name="Cool" type="four" color="orange" size={3} count="infinite" duration={2}/>

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)

Issues and Bugs

Let us know if you found a bug