Animating an Image on scroll
This tutorial applies to the following templates:
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.
- 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.
- Locate the source code for your image. Example:
<img src="images/sample.jpg" alt="sample" />
- 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).
- Hit 'Save and Close' and refresh the frontend of your site to test your animation