Trends

Triggering CSS Animations on Scroll

In this quick tutorial I’ll show you how to trigger CSS animations on selected elements as you scroll down a page, all without having to use a plugin.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

Triggering CSS Animations on Scroll

In this quick tutorial I’ll show you how to trigger CSS animations on selected elements as you scroll down a page, all without having to use a Javascript/jQuery plugin.

An example of this animation technique can be seen on the Jeet Grid System website. As you scroll down their page, you can see each CSS transform animation being systematically triggered.

This is an easy effect to achieve with some simple Javascript and a sprinkle of CSS magic courtesy of Daniel Eden’s animate.css library. This is the effect we will be creating:

So, let me quickly explain what’s going on in the above demo.

The Markup

The revealOnScroll class must be added to each element that needs to be animated on scroll:

<div data-animation="flipInX" data-timeout="400">...some content here...

The data-animation attribute declares the animate.css animation that will be used. It’s also possible to add an optional timeout, this could be useful when multiple elements need to be animated from the same position.

The Javascript & CSS Animations

Next, we need to declare some variables at the top of the Javascript document (don’t forget to load jQuery & Modernizr, these are required to check wether or not it is a “touch” device). I also imported animate.css for the CSS based animations.

var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;<br>

Next we have to watch for the scroll event that will be triggered as the user is scrolling:

$window.on('scroll', revealOnScroll);

With the revealOnScroll function we check if the element that needs to be animated are in the viewport. If so, the animation class is added and that will trigger the CSS animation.

function revealOnScroll() {
     var scrolled = $window.scrollTop();
     $(".revealOnScroll:not(.animated)").each(function () {
       var $this     = $(this),
           offsetTop = $this.offset().top;
 
       if (scrolled + win_height_padded > offsetTop) {
         if ($this.data('timeout')) {
           window.setTimeout(function(){
             $this.addClass('animated ' + $this.data('animation'));
           }, parseInt($this.data('timeout'),10));
         } else {
           $this.addClass('animated ' + $this.data('animation'));
         }
       }
     });

Finished

Now wasn’t that easy to do? There is also another check for the inverse: when the elements are not visible, the animation classes are removed. This will make it possible to animate the items for more than one time per request.

Next Steps

There is a jQuery plugin called Cre-animate available on CodeCanyon that will quickly and easily add onscroll animations to any element on your website. Or, you could browse this amazing collection of cool CSS animation resources and tools.

This post was originally published by Benoit on his blog here.