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 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!

scrollReveal.js – the easiest way to create on-scroll animations on your Joomla website 4.465 (89.23%) 13 votes
This article was first published April 25th, 2014
  • John David Reinhard

    Quick question that I’m not sure it belongs here, is there a way in Joomla to set a duration for each slide? If so how so I do that?

  • Péter Márton


    Is this work in joomla article too? The scrollreveal.js is in the template, and with the custom html is work, but not the articles. Is that possible?

  • Mohsin Ali

    I have this in my html

    but it doesn’t work. I have included the JS file and trying to do this. Not working.

  • adrian

    Great! I just have one question though, why when my page load everything starts all of the same time.
    but when if I refresh my page when I’m in bottom of the page and scroll back up it’s all animating as it should

  • Alex Mustatea

    I have it working when I scroll down, but when I scroll up everything is already there and no animations occur. Any help?

    • Skarlett

      add “reset” to the start of your animation commands.
      data-sr=”reset enter right move 20px over 1s”

  • Ruslan OvchinnikoFF

    Hello all. How I can disable animation when I scroll down and elements go out from view zone and when after I scroll up?

  • samlf3rd

    I have it working when I scroll down, but when I scroll up everything is already there and no animations occur. Any help?

    • Alex Mustatea

      Did you get working? I have the same problem…

      • Skarlett

        See my comment above. :)

    • Skarlett

      add “reset” to the start of your animation commands.
      data-sr=”reset enter right move 20px over 1s”

  • Problem fixed, thank you for your feedback :)

  • Sarah

    This is very helpful, but I can’t see all the codes writing above! Is it just me? Its all blank .. I tried checking it from different browsers and still same problem. Help please!

  • thedesigner

    Hi all, I’m kinda new here.. I’ve got the animation works perfectly for my website when viewing on desktop, however the animation does not work on iPad, iPhone and Mobile Chrome. Is there something I’ve missing out? Could anyone please advise?

    • Hello,

      Do you remember that the animation on mobile device will appear when you stop scrolling the website?

  • It looks like the developer changed the activation text. It was

    data-scroll-reveal=” ”

    but now it’s

    data-sr=” “

  • Thanks

  • simplewnewz

    Excellent! Thanks for the amazeballs explanation!

    Sara @

  • Noj Vek

    Mind blown