Tutorials & Examples

Find out how to use CoolText, both via javascript & html, following the tutorials on these pages.


As you can see in the following paragraphs CoolText can be used both with javascipt and html. The first thing to do is to include the required js libraries into your html. CoolText, in fact, requires jQuery and TweenMax, an incredible animation library.

Include jQuery and TweenMax JS

Firstly include jQuery and TweenMax. Place the scripts below into the <head> section of your html document.

If you prefer not to host these files on your server, you can use the following links:

http://code.jquery.com/jquery-latest.min.js http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

Include CoolText

Include CoolText and an animation pack *. Place these after the above inclusions, into the head section of your html.

In the above example we have included the entire animation pack (300 animations) cooltext.animations.js, which is approximately 210 kb in size. If you don't need to use all the animations, we strongly recommend that you create your own sets, using the file create_pack.html included in the zip file.

Make you text hidden

If you want CoolText to start with an "IN" animation (with a fade effect from opacity 0 to 1), it is recommended to hide your text using css visibility property. This hides your text but it takes up space on the page.

That's it. You can now create incredible text animations both with javascript and html as described in the "using" sections.

Running Wordpress?

Check out our CoolText Wordpress Plugin