Creating Scroll Animations with Waypoints and Animate.css

Last fall Atomic Object launched a redesigned website with lots of great new visuals and content. One of my favorite features of the redesign is the “slide-in reveal” homepage animation that slides images and text in from the sides of the screen as you scroll down the page.

I was recently asked to do some updates and revisions on the website, and so took the opportunity to dig into how the animations work. It turns out that achieving the animations is relatively simple.

Here’s how you can implement your own “slide-in reveal” animations:

What You’ll Need

• Waypoints – A javascript library that allows us to execute a function when we scroll to an element.
• Animate.css – A CSS animation library that enables sophisticated animations through HTML classes.
• jQuery – Although not a dependency of either Waypoints or Animate.css, jQuery allows us to easily trigger our animations.

1. Using Waypoints

The basic Waypoint function in jQuery looks like this:

$("#element-to-animate").waypoint(function() {
    // animation code
  }
}, { offset: '100%'});

The 'offset' value determines at what point the animation is triggered. By default, the animation is triggered when the element you are animating reaches the top of the viewport.

The offset can be set as a percentage of the viewport (eg, setting 'offset: 30%' triggers the animation when the element is 30% from the top of the window), or as a value that translates to pixels (setting 'offset: 100' triggers the animation when the element is 100px from the top of the window).

Generally, we’ve found that having the animation trigger lower on the screen works best. This would translate into a larger offset value.

2. Combining with Animate.css

To create the actual animation, we use Animate.css. Animate.css allows us to create sophisticated animations solely through CSS classes—we simply add the 'animated' class and the animation name (we use 'fadeInRight', 'fadeInLeft', and 'fadeInUp') to the target element.

When paired with Waypoints, we can wait until the user reaches a certain point on the screen before adding the actual animation name, thereby firing the animation at the exact desired moment:

  ...

$("#element-to-animate").waypoint(function() {
    $('#element-to-animate).addClass('fadeInLeft');
  }
}, { offset: '100%'});

3. Tying it All Together

Finally, we’ll need to hide the element we wish to animate in order to create for the “reveal” effect that we want to achieve. Fortunately, Animate.css gives us the handy 'fade' class to do this. Update: We can easily hide the element by setting its opacity to zero with CSS.

The 'fade' class sets the 'opacity' of the element to zero, thereby hiding it but not taking it out of the page structure. This is important, as we don’t want the page to reflow when our element is revealed.

Here it is all together:

  ...

$(document).ready(function(){

  // hide our element on page load
  $('#element-to-animate').css('opacity', 0);

  $('#element-to-animate').waypoint(function() {
      $('#element-to-animate').addClass('fadeInLeft');
  }, { offset: '50%' });

});

To see Waypoints and Animate.css in action, head over to the Atomic Object homepage and scroll down!