saxxtext.js :fire:

A tiny (~0.75kb) javascript library for cool in & out text & hover animations.

// Start baffle on any element(s).
setSaxxAnimation ( 'h1' , 'animated heartBeat' ) ;
setSaxxMouseEffect ( 'h1' , 'animated heartBeat' , "black", 'blue' ) ;

Installation

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

npm

npm install --save saxxtext

vanillaJS

<script src="https://iamharsh.design/saxxtext/lib/saxxtext.js"></script>

Usage

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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://iamharsh.design/saxxtext/lib/saxxtext.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.
setSaxxAnimation ( 'h1' , 'animated heartBeat' ) ;
setSaxxMouseEffect ( 'h1' , 'animated heartBeat' ,'black','blue' ) ;

Animation Options This js library uses animate.css for animations so we support all the animations provided by animate.css. So you can visit their website and see what animation suits you and can use it.

Demo

Author

Harsh Vardhan Goswami

Contribution

You guys can also contribute to this project what you have to do is just fork this repo and then make a pull request and i will merge it. Its simple af.