Tiny JS Library For Animating Text On Hover – saxxtext.js

Preview:

Description:

saxxtext.js is a lightweight JavaScript animation library for animate any text on cursor hover over & out using CSS animations.

Comes with 16 built-in animations and compatible with any 3rd CSS animation library (e.g. animate.css) or write your own CSS animations.

How to use it:

1. Load the stylesheet saxxtext.min.css and JavaScript saxxtext.js in the document.

<link rel="stylesheet" href="saxxtext.min.css" />
<script src="saxxtext.js"></script>

2. Apply an animation of your choice to the target text and done. All possible animation names:

• balance
• bop
• dribbbleDown
• dribbbleUp
• flipY
• heartBeat
• jello
• jelly
• rubberBand
• shrinkyDown
• shrinkyJump
• swing
• tada
• titlyWhirl
• wobble
• zoomInUp

<h1>C</h1>
<h1>S</h1>
<h1>S</h1>
<h1>S</h1>
<h1>C</h1>
<h1>R</h1>
<h1>I</h1>
<h1>P</h1>
<h1>T</h1>

setAnimationSaxx ( 'h1' , 'saxx heartBeat' ) ;

3. Trigger the animation on hover over.

setSaxxMouseEffect ( 'h1' , 'saxx heartBeat') ;

4. Colorize the text on hover over & out.

setSaxxMouseEffect ( 'h1' , 'saxx heartBeat' , 'black' , 'blue' ) ;

5. You can also apply any custom CSS animations to the text. In this example, we’re going to use Animate.css for CSS animations:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

setAnimationSaxx ( 'h1' , 'animate__animated animate__bounce' ) ;
setSaxxMouseEffect ( 'h1' , 'animate__animated animate__bounce') ;