We're added some text animations in some of our templates for a bit of extra visual fun. It involves a bit of Javascript and some fun CSS3 styles to control the animation and directions. We have included four effects: zoomIn, fadeInLeft, fadeInRight, and fadeInDown. You can adjust the direction and the timed delay as shown below.

The animated effect is only shown when the area comes into view on the screen. The effect only happens once unless you reload the page.

To give you a better example of how this works, this tutorial will place a row with 3 columns onto the page, with each sliding into view. Then we'll have an image drop down and the heading zoom in. Then we'll show you the code for how it's done. Refresh the page, watch the animation, and then let's play.

Some Rules of the Road:

• If you do not want the animation, delete the "wow" and effect name from the class, and delete the data-wow-delay time.
• Animations are applied to "block level" elements.
• A block level element can have multiple classes applied. You will need to add multiple classes by hand to the code.
• These effects are subtle, but don't go overboard. Just like with the old animated javascripts from the past, like those falling snowflakes or hopping bunnies, just becaused you can doesn't mean you should.
• If this trend passes (and it probably will eventually), delete the animations.

[Credit for this application: Animate.css from https://daneden.me/animate, Copyright 2014 Daniel Eden] If you want more, visit the site and look through the instructions.