Animating a Module on scroll
This tutorial applies to the following templates:
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.
- From your Joomla administration navigate to the setting of the module you wish to animate (Extensions -> Module Manager -> [YourModule])
- Within the module settings click on the 'Advanced' tab.
- In the 'Module Class Suffix' field enter 'animate' along with your animation class name.
animate fadeInUpNote: 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.
If the module is viewable prior to scrolling then it will be animated as soon as the page is loaded.