In our more recent template releases we have included an option to animate areas of your Joomla website when that area of the page comes in to the viewport of your browser. This is achieved by adding a class name to the element you wish to animate and is ideal for adding life to a page and a great way to grab a users attention to important page content.

Animation can be added to almost any element of your site content however in this tutorial we are going to focus on how to animate an entire module of your choice when that module enters the viewport of your browser.

1. From your Joomla administration navigate to the setting of the module you wish to animate (Extensions -> Module Manager -> [YourModule])
2. Within the module settings click on the 'Advanced' tab.
3. In the 'Module Class Suffix' field enter 'animate' along with your animation class name.
   
   Example:

   animate fadeInUp 

   Note: A list of the animation class names along with a working example is available on the demo of each compatible template (Parameters -> AnimateOnScroll).
4. Hit 'Save and Close' and refresh the frontend of your site to test your animation.

If the module is viewable prior to scrolling then it will be animated as soon as the page is loaded.

So how does it work? When you scroll down through the page, Javascript keeps an eye on all elements with the 'animate' class name and detects when that element becomes "visible". When you add 'animate' to the 'Module Class Suffix' field you are adding this class name to the surrounding div for that module.  It then changes the 'animate' class to 'animated' which triggers the CSS3 on the animation class (fadeInUp).