The Ultimate Toolbox for creating
amazing web sites!

Animate text with the Banner object

One of the lesser known features of WYSIWYG Web Builder is the ability to animate individual characters of the Banner text.
By using WYSIWYG Web Builder's built-in CSS3 animations you can create amazing animated banners without using flash or video.
Welcome to my website!
Step 1
Insert a Banner object
Step 2
Set output format to 'Publish as CSS3'
Step 3
Select 'Enable CSS3 text animation' in the 'Text Animation' section of the properties.

You can set a different animation for showing and hiding the characters.

The Duration specifies the length of the animation and Delay specifies the delay between the animation of each character.
The sequence of the animations can be set with the Mode property:
sequence, use standard character sequence
reverse, reverse the character sequence
shuffle, randomize the character sequence
Notes:
CSS3 animations will only work in modern browsers! Animations and transitions do NOT work in Internet Explorer 9 or older!

Not all animations may be useful for animating characters. For example animating the border-color will not have any effect on the text or will just look weird...

Also some animations were designed for showing, while others were designed for hiding. Usually the name of the animation indicates this. For example 'puff-in' is for showing and 'puff-out' is for hiding. But of course you can designed your own animations with the Animation Manager.

Events

Animated text can also be controlled via with Events.
"Media Play" will start the animation from the beginning.
"Media Stop" will stop the animation. Characters will be hidden.
"Media Pause" will stop the animation. Characters will remain visible (depending on the current state). Pressing "pause' again will continue the animation where it left off.


This feature can be useful for use in a carousel, to make sure the text animation always starts from the beginning when the slide becomes active.
Tip:
Events can also be used to trigger the animation only once when the page loads. For example, with the help of a Timer.
Set the action to 'Media Play' to initiate the text animation.
It's important to set the 'pause time' to 0 to prevent the animation from repeating!

Demo

Animated Text controlled via Events
Project file for the demo

Related tutorials

An introduction to CSS3 animations
Start and stop CSS3 animations with Events
An introduction to CSS3 transitions