In recent template releases we have added the means to add animation to elements of your design. These animations are automatically triggered by the template when the element to which you have added the animation enters the viewport of your browser. Adding an animation to an element is achieved by adding a class name to that element.

In this tutorial we are going to focus on how to animate an image within an article or custom HTML module. We are going to presume the image you wish to animate is already in your article/custom HTML module.

1. In your editor hit the 'Toggle Editor' button at the bottom right of your article. This should bring up the HTML source code of your article. Some editors will have a source/HTML button available which you can also use.
2. Locate the source code for your image. Example:

   <img src="/images/sample.jpg" alt="sample" />

3. Add the class name 'animate' along with your animation class name. Example:

   <img src="/images/sample.jpg" alt="sample" class="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

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". It then changes the 'animate' class to 'animated' which triggers the CSS3 animation (fadeInUp).