scrollReveal.js – the easiest way to create on-scroll animations on your Joomla website

On-scroll animations are one of the most popular and enduring web-development techniques from recent years; with them, HTML elements remain hidden until the user scrolls the page, whereupon the element reveals itself with an impressive (assuming you’ve coded it correctly!) animation that makes your site look dynamic and modern, unlike the static pages of old. In our latest business-focused templates such as MO and John S we included a helpful additional script called scrollReveal.js, which allows customers to define animations without any HTML or CSS knowledge.

Usually, an on-scroll animation is created with a CSS3 transition and a script to detect the current page position in the browser window. Very nice when you know how, but if you’re a beginner, it can be a daunting, frustrating prospect. Thankfully, the ScrollReveal library is here to simplify the process so that even someone with fairly basic skills can get the animations up and running without any blood, sweat or tears.

The first simplification, which will please those of us who struggle with the often unclear syntax that CSS3 produces, is that scrollReveal.js uses declarative language to describe the animation; this means no CSS or JavaScript code. Take a look at this sample animation description; it’s quite a bit clearer than average:

<div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div>

This simple line of HTML code has actually defined a complete animation already, believe it or not! The description of what should happen is all that’s needed to get the animation going. The element starts off invisible; hidden from view, like a dancer waiting in the wings. Once your browser window reaches the element it will enter from the left side and move 50 pixels to its end position (think of the ‘move’ command as defining how far away from its final position the element should start from). How long will this animation take? That’s what the final number’s for; by declaring ‘over 1.33s’ the animation knows to get everything done within 1.33 seconds.

It’s really easy to understand, even for inexperienced users, but the benefits are huge. If you’re looking to use scrollReveal.js you’ll need to add the script to your website, just like any other standard JavaScript library, with the code:

<script src='{your_JavaScript_path}/scrollReveal.js'></script>

The code above may be added to the HEAD area or right before the BODY closing tag (), and of course your_JavaScript_path should be changed to match the location where you’ve placed the downloaded script. With GavickPro templates the best way to do this is to download the file and copy it to the template/js directory; the exact directory, where ‘template’ is your chosen template, such as MO, is http://www.youdomain.com/template/gk_template_name/js/. Then, to include library, please open the template/layout/blocks/head.php file and use this code:

$this->API->addJS($this->API->URLtemplate() . '/js/scrollreveal.js');

That’s all you need to do, and the library is now good to go. Of course if you’re using our John S or MO template the library is already included, so you can skip straight to defining animations. To define your own animation you first need to choose which element you want to animate; usually you would use a DIV container published via a Custom HTML module. The whole animation is defined in a data-* attribute called data-scroll-reveal; in this element you can add your animation description. For example, if you add a Custom HTML module to your site with a sample DIV of:

<div class="myAnimatedElement">Ligula Venenatis Aenean Mollis Ultricies</div>

You’ll nedd to extend this code by adding thedata-* element and your animation description, like so:

<div class="myAnimatedElement" data-scroll-reveal="enter top move 50px, after 0.9s"> Ligula Venenatis Aenean Mollis Ultricies</div>

…and that’s all. Now you can just open your website and check the animation effect to make sure it’s working correctly and looking good. As you may have noticed you an describe the animation using several keywords like:

• enter – controls the vector origin of your reveal animation (possible values: top, right, bottom, left).
• move – the distance your element travels when being revealed (for example 123px).
• over – duration of your reveal animation (for example 10s, 0.5s, 1.34s).
• after/wait – the delay before your reveal begins.

All of these keywords may be combined as in the example above, where we used enter with move and after. To make easier scrollReveal also allows for the use of some prepositions and sentence connectors to provide even more specific control of the animation, such as from, the, and, then etc… Advanced users who want even more control may prefer to define the base configuration for every animation to save a bit of time, with more complex animation added later, but for basic usage this is all you’ll need to get your site looking more dynamic.

If you want to see scrollReveal.js in action drop in on our John S demo or MO template and scroll through the website to get those animations triggering. For info on how the library works you can also check out this CodePen demo

See the Pen Scroll Reveal by Avaz Bokiev (@samarkandiy) on CodePen.

ScrollReveal.js is released under MIT license and it is created in pure JavaScript which means that jQuery or MooTools is not necessary. For more details read up on the official documentation at GitHub. To download the package head to this page and click the Download ZIP button in right column.

Have fun and share your experiences and animations with us in the comments!