Tutorials & Examples

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

Using CoolText via Javascript

With CoolText you can animate one or more DOM elements (using jQuery selectors). There are basically three types of animations:

IN: fading a text from opacity 0 to 1
OUT: fading a text from opacity 1 to 0
MID: opacity not affected

So you can create animations sequences with ease, showing and hiding texts with incredible ready-to-use effects. In the animations section you can try all the available animations.

A simple example

It's very easy to create animations sequences. The following example animates a DOM element (elementID) with an IN animation (cool12), waits for 2 seconds and then does an OUT animation (cool209). For a complete list of all the available animations, see the animations section.

sample text to animate
RUN

Animations parameters

You can control each animation using parameter as speed, stagger, order and so on and choose to apply the effects to letters or words. For a complete list of options, see the docs section.

sample text to animate
RUN

CoolText parameters

There are some other parameters you can use to control CoolText. For a complete list of options, see the docs section.

sample text to animate
RUN

Random animations

You can also specify more than one animation effect, letting CoolText choose one of them for you. Try running the following example many times.

sample text to animate
RUN

Animating other css properties

During an animation CoolText can change other css properties. See the TweenMax website for a complete list of parameters you can specify.

sample text to animate
RUN

NOTE: The css properties are applied to the specified elements (words or letters). So if, for example, we change the letters colors to red and then we try to set the words color to yellow, nothing seems to happen. The words divs are correctly set to yellow, but the letters divs (which are inside words divs) are red. So we still see the letters red.


Updating text and style

During a sequence you can change the text you would like to animate and its css properties. You can also add or remove a css class by addClass and removeClass parameters, as described in the docs section.

first text to animate
RUN

Events

A series of callback are available to control the animations during a sequence.

sample text to animate
RUN

run the example and see the callbacks in action

Mouse events

CoolText can animate elements on mouse over, out and click. The overwrite parameters, if set to true, is used to immediatly start the animation, stopping the other ones.

sample text to animate

Animating on Visible

You can choose to start an animation when your text become visible while scrolling the page.


Public methods

You can manually control the animations sequence using some useful public methods. Let's consider the first three, play, pause and restart.

sample text to animate
PLAY
PAUSE
RESTART

You can also move through the sequence steps using the goto methods. As you could see, we've added the stop: true parameter to all the IN animations so that they stop as soon as they end. This is useful if you want to create a news ticker or something similar. When you use the goto method with where:'prev' or where:'next' CoolText goes exactly 1 step ahead or back. But if you want to move directly to the next or previous update, you should use the where:'prev_update' or where:'next_update' parameters.

sample text to animate
PLAY
PREV
NEXT
PREV UPDATE
NEXT UPDATE

NOTE: in this example the cooltext("goto", {where:'prev'}) called when a IN animation is finished don't seem to have any effect, repeating the last animation. However in this situation CoolText goes exactly 1 step back, finding the update action and then proceding to the IN animation. So this is correct.


The goto method accepts also the stagger parameter that lets you go to a sequence step "i" adding or subtracting an amount (the stagger). In the following example the cooltext("goto", {where:'prev_update', stagger:-1}) and cooltext("goto", {where:'next_update', stagger:-1}) move to one step back of the previous or next update, letting CoolText play the OUT animation before doing the update.

sample text to animate
PLAY
PREV UPDATE
NEXT UPDATE
PREV UPDATE -1
NEXT UPDATE -1

Running Wordpress?

Check out our CoolText Wordpress Plugin