saxxtext.js

i n s t a l l a t i o n

To get saxxtext, either download the latest release and include
it in your markup, or install with NPM.

npm install --save saxxtext

u s a g e

To use saxxtext, the elements you wanna animate have to be inside a parent tag
and just by adding the few lines of code mentioned below can do the job.

// add to html file

<link rel="stylesheet" href="https://iamharsh.dev/saxxtext/lib/saxxtext.min.css">
<script src="https://iamharsh.dev/saxxtext/lib/saxxtext.min.js"></script>

//html example

<div class="elementbody">
<h1>H</h1>
<h1>A</h1>
<h1>R</h1>
<h1>S</h1>
<h1>H</h1>
</div>

// add to style.css .
.elementbody { display : flex; }

// add to javascript file.
setAnimationSaxx ( 'h1' , 'saxx heartBeat' ) ;
setSaxxMouseEffect ( 'h1' , 'saxx heartBeat' , 'black' , 'blue' ) ;

y t v i d e o

saxxtext.js : A tiny text animation js and css library

a n i m a t i o n s .

This js library uses its own animation library as of now we supports only 10 text animations.
So you have to choose from demo section below what animation you would like to use.

// Start baffle on any element(s).
setAnimationSaxx ( 'h1' , 'saxx heartBeat' ) ;
setSaxxMouseEffect ( 'h1' , 'saxx heartBeat' , 'black' , 'blue' ) ;

// replace text with blue color with animation you wanna use.

d e m o

Just hover on the text below and see magic

#1.flipY

f l i p Y

#2.zoomInUp

z o o m I n U p

#3.dribbbleUp

b o u n c y U p

#4.dribbbleDown

b o u n c y D o w n

#5.shrinkyDown

s h r i n k y D o w n

#6.bop

b o p

#7.balance

b a l a n c e

#8.shrinkyJump

j u m p y

#9.heartBeat

i a m h a r s h . d e v

#10.rubberBand

e l e c t r o n

#11.wobble

u p e r o

#12.jello

j e l l o

#13.jelly

j e l l y

#14.swing

s w i n g

#15.tada

t a d a

#16.titlyWhirl

t i l t y