Revealing content on scroll

A popular use for animation on the web is adding movement to elements when the browser scrolls. In this chapter we’ll take a look at how to do this.

Here’s today’s demo on CodePen. Try scrolling down the page, and see how the quotes and cats fade into place.

Wow.js

Many sites trigger custom animations when you scroll to a certain point. They could start playing a video, trigger a complex keyframe animation, or just have items fade into place to draw attention to them.

In each case, what’s happening is that there’s some JavaScript that adds a class to an element when it’s visible on screen. We can then attach animations to the class, so that the browser scrolling results in the animation starting at the right time.

There are many JavaScript options that add classes, and one I’ve found easy to use is Wow.js. Let’s use it to create a simple example where content fades into view as we scroll.

“>

Using Wow.js

Using Wow.js involves two steps. The first is to download the JavaScript. Place the wow.min.js file in your project’s JavaScript folder. Next step is to reference this file from within your HTML:

<script src="javascripts/wow.min.js"></script>

(Assuming your folder is called javascripts - change as needed)

Then, we invoke the JavaScript using this command (paste it after the previous code):

<script>
 new WOW().init();
</script>

We can now add “wow” classes to our content and Wow.js will take care of working out whether our content is on-screen.

Adding “wow” classes

If we have an element we want to animate on scroll, start by making sure it has the class “wow”:

<p class="wow">...</p>

This means that when the browser scrolls this content onto the screen, Wow.js will add “animated” to the class, like this:

<p class="wow animated">...</p>

If we had an animation on our p.animated elements, the animation would only happen when this class is added.

Hiding and showing

For our demo, we’ll hide all elements with the wow class, and show them when they have the animated class. First, we hide them:

.wow {
  opacity: 0;
  transition: all 0.5s 0.5s ease-out;
}

We also apply a transition here so that the element will fade in. Notice the second 0.5s. In this case we’re also adding a delay of half a second. This will allow the element a chance to properly scroll into the viewport before it fades in.

The next code defines how the element will look with Wow.js’s animated class added:

.animated {
  opacity: 1;
}

We should now have a situation where items will fade in as the user scrolls! See it in action on the demo.

Using Animate.css

Wow.js has been designed to work well with the CSS framework Animate.css. I’ve not used in this example yet as it’s good to understand how to create our own transitions, but it’s worth looking at some of the transitions Animate.css gives us out of the box.

In this example I’ve used Animate.css. Note how there are no animations or transitions in the CSS. Instead, I’ve added a class to the HTML to tell Animate.css which animation to apply:

<section class="image wow bounceInUp">

The class bounceInUp is a reference to one of Animate.css’s many built in animations. If you select the “cog” on the CSS section in the demo, you’ll see that I’ve referenced the Animate.css framework under “External CSS file”.

Using Modernizr

It’s generally a good idea to protect against situations in which we hide content and show it again using JavaScript. People may not have JavaScript enabled or working for some reason or another. A script such as Modernizr can be used to handle this. It’ll add a js class to the body of the document, and we can then bring that into our styles.

I’ve included Modernizr in the demo.

Homework

Making content fade into place is a great start, but what ways can you imagine this being used to add value to your designs and sites? When browsing, look out for times when content seems to start animating as you scroll to it.

When does it work, and when does it not work so well?