Hey guys, it is time for some more Gatry 5 freebies! We are very happy to present you our brand new on-scroll animation atoms - "ScrollReveal.js" and "WOW.js"!
For those of you who do not yet know, on-scroll animations are one of the most popular and enduring web-development techniques from recent years, where HTML elements remain hidden until the user scrolls the page, whereupon the element reveals itself with an impressive animation that makes the site look dynamic and modern.
Creating movement is a great way to provide an interesting and interactive experience to your visitors. With modern sites providing a greater deal of interactivity, it is becoming increasingly expected that even simple websites will offer some level of animation to engage their users.
So, let's have a closer look at our on-scroll animation atoms for Gantry 5...
ScrollReveal.js is a library to "easily reveal elements as they enter the viewport." It is very small in size, as its weight is roughly 9Kb. It has no dependencies, so you don’t need to add other libraries to use it. The animations are achieved by adding an HTML5 data tag attribute to the element. In addition to the nice effects it supports, what you will really love about this library is that you can use natural language to define the animation you want to run:
<p data-sr="wait 0.3s enter left and move 100px over 0.5s"></p>
The description of what should happen is all that is needed to get the animation going. The element starts off invisible, and once your browser window reaches the element it will
wait for additional 0.3 seconds and then will enter from the left side and move 100 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? By declaring
over 0.5s the animation knows to get everything done within 0.5 seconds.
You can find the full list of available options and keywords in the ScrollReveal.js documentation on Github.
WOW.js is a library which works with the Animate.css library to create great cross browser CSS3-based animations in your website. All you need to do is to add the
wow class together with the class of the animation you want to trigger.
<p class="wow bounceInUp"></p>
Being a class-based solution, WOW.js is a great tool for any Joomla and Wordpress website, where you can easily add custom CSS classes.
You can find more details in the WOW.js documentation.
As you can see, both the "ScrollReveal.js" and the "WOW.js" atoms are a great addition to your Gantry 5 website. In Gantry 5 you can easily add data tag attributes and classes from the Layout Manager. Also, all our particles have the option to add both, tag attributes and classes, in many different places in the HTML markup.
Now just go ahead, download our FREE on-scroll animation atoms and enjoy! And of course, feel free to leave us a comment below :)