EverWeb Widgets HTML5

Textillate Text Animation Sequence Widget

Text Animation Using Textillate

Use Sparingly!

Animation & Dynamic Topography

If the other animations aren't enough to grab the vistor's attention and shake them out of their complacency, this one should do it.
The widget combines the CSS animations with two jQuery plugins - Textillate & Lettering.
The CSS provides the animation type and the javascript gets to work on the individual letters.
Text can be animated both in and out although out on its own is kind of pointless.
By adding a loop function, in and out animation can be combined as illustrated by the heading on this page.
The animations are applied to a text element and this can be an h1 through h4 heading or a paragraph.

Options

Initial Delay: is the time before the effect starts to take place.
Display Time: is the time that the text is displayed for before the next animation starts to replace it.
Sync: Animates all the letters at the same time.
Shuffle: Randomizes the character in/out sequence.
Reverse: Reverses the character sequence.
NOTE: When using Shuffle or Reverse, Sync should be turned off.
Delay Scale: sets the delay factor applied to each consecutive character.
Delay: sets the delay between each character.

Notes

The very first item in the widget settings is a checkbox. This is necessary so that the text can actually be seen in EverWeb. If the box is unchecked the text will disappear because it has an animation and hasn't actually appeared yet! Once the text has been entered and customized, this box must be unchecked before publishing - otherwise the animation won't work.

The delay and delay scale settings will be quite confusing and the best way to understand their effect is to experiment with different values for each on a simple "In" animation to get an idea of how they effect the animation.

Get The Widget

Widget Settings

Textillate Widget
Textillate