JavaScript
Article

Revealing Elements with scrollReveal.js

By Aurelio De Rosa

CSS is the language we all use on the web to style websites since its creation in 1996. Today we’re able to create awesome effects using CSS and it’s becoming more powerful everyday thanks to the introduction of shapes, flex-box, and animations. This is of course true apart from the well-known joke that we can create animations but until few years ago we could not easily vertically center elements (and this is still true in some versions of Internet Explorer).

Despite CSS being the language to accomplish certain tasks, from a long time now, JavaScript has been used to create nice animations. There are even entire JavaScript libraries dedicated to creating animations. In this article I’ll cover one of these libraries named scrollReveal.js.

What’s scrollReveal.js?

scrollReveal.js is a library to easily reveal elements as they enter the viewport. It’s very small in size, as its weight is roughly 3Kb if minified and gzipped. It has no dependencies, so you don’t need to add other libraries to use it like jQuery. In addition to the nice effects it supports, what I really like about this library is that you can use natural language to define the animation you want to run. We’ll come back to this feature in a few moment, but first I want to show you a simple example of what this library can do for you:

Nice, isn’t it? And this demo is created with very few lines of code. The code for this demo is available as a JSFiddle.

Now that I’ve hopefully interested you, let’s proceed in an orderly fashion.

Getting Started with scrollReveal.js

In order to use scrollReveal.js in our web pages, we have to obtain a copy of the library. As usual this can be done either by downloading it from its GitHub repository, or through Bower using the following command:

bower install scrollReveal.js

Once downloaded, you have to include the library in your page by adding a script element as shown in the following code:

<script src="path/to/scrollReveal.min.js"></script>

In case you have downloaded it using Bower, the path should resemble the following:

<script src="bower_components/scrollReveal.js/dist/scrollReveal.min.js"></script>

With the library in place, we need to add or modify some elements that the library will animate. Specifically, scrollReveal.js searches for elements on the page with an attribute named data-sr. As we’ll see in the next section you can change the animations applied by setting a value for this attribute, but in its simple use, having the attribute is enough.

So, let’s say that you have the following HTML code in your page:

<body>
   <div data-sr>This is the first div</div>
   <div data-sr>This is the second div</div>
   <div data-sr>This is yet another div</div>
</body>

With this simple code in place, all you need to do is to add the following JavaScript code:

new scrollReveal();

With this last step performed, we’re now ready to open the page. The library will execute a simple fade in on all the divs . The result of this code, with a bit of style to be more pleasant, is displayed below and also available as a JSFiddle:

Let’s now take a look at some of the effects that are available.

Configurations and Effects

By default scrollReveal.js lets your elements enter the viewport from the bottom of the page but you can change this effect on a per-element basis by using the enter keyword followed by the direction. So, you can write enter left. You can also specify how many pixels a given element has to be moved using the move keyword followed by the number of pixels, for example move 15px. In between these directives you can place any text you like. For example you can define an element as follows:

<div data-sr="please, can you enter left and then move 15px ?">This is the first div</div>

Please don’t go too wild with this thing because you may end up writing words in between the keywords, obtaining an unintended result. For example, this definition is incorrect:

<div data-sr="please, can you enter left and then move of 15px ?">This is the first div</div>

Can you see the word “of” between “move” and “15px”? Good! Let’s continue our discussion.

With scrollReveal.js you can also let your elements scale up or down of a given percentage. You can create this effect by using the scale keyword followed by the word up if you want the element to grow, or down if you want the element to be smaller, followed by the percentage itself.

In case you want the effect to take place after a given amount of seconds, you can use the wait keyword followed by the amount of seconds to wait. An example of use of these two directives is reported below:

<div data-sr="hey bro! wait 2s and then scale up 20% this element">This is another div</div>

As I said, you can also perform a basic animation without specifying a value for the data-sr attribute. This happens because the library has a set of default values for the keywords we’ve discussed in this section and more. We can also change these default values by passing a configuration object when we invoke the scrollReveal() method. Here is the complete list of default values associated with their properties:

defaults: {
  enter:    'bottom',
  move:     '8px',
  over:     '0.6s',
  wait:     '0s',
  easing:   'ease',
  scale:    { direction: 'up', power: '5%' },
  opacity:  0,
  mobile:   false,
  reset:    false,
  viewport: window.document.documentElement,
  delay:    'once',
  vFactor:  0.60,
  complete: function( el ) {}
}

In the next example we’ll put some of the properties of the configuration object and the keywords I’ve described in this section into action. First, we’ll write the HTML code. We’ll define three divs: one will perform the default animation with some default values changed while the other two will have their own specific properties:

<div data-sr id="d1">
   <h1>I run the default animation</h1>
</div>
<div data-sr="wait 1s and enter bottom" id="d2">
   <h1>I have specific values</h1>
</div>
<div data-sr="scale down 10% and then ease-in-out 100px" id="d3">
   <h1>I have specific values too</h1>
</div>

To change the default values, we’ll set a configuration object and pass it to the scrollReveal() method as shown below:

var config = {
   enter: 'right',
   wait: '0.5s',
   move: '20px'
}

new scrollReveal(config);

The final result of this code is shown below and available as a JSFiddle:

Conclusion

In this article we’ve discussed scrollReveal.js, a small and nice library to create animations on a website. As you’ve seen, using this library is very easy. As always remember not to abuse animations, as they can quickly become annoying and distracting. Let your users focus on your content and then improve, where possible, their experience with some nice effects.

  • Trav

    Very nice article, I was looking at the fiddles however and I’m not seeing any animations. I even tried to mess with it myself, still not seeing anything. Any idea what might be going wrong?

  • litexnt

    I am using scollReveal, it works well with static elements and has nice animations. The problem is with ajax loaded content. I couldn’t make it work. Can you create a basic example and apply data-sr to each li element in an unordered list that is created from a json object received from an ajax request?

  • Zhe Xiao

    I just have a look in jsfiddle. That’s a nice js library and worthy to marked.

    • Aurelio De Rosa

      I’m glad you liked it :)

  • Aurelio De Rosa

    I’ve tried them now and they work as expected. Don’t know what’s wrong in your case.

    • Trav

      Heh, for some reason they’re working now! It looks very nice, I’ll probably be trying this out in a future project!

  • Carl S

    Are there any brief examples where this could be triggered by events rather than on page load?

    And for me, in the first Fiddle, the first div does not enter from the left in Windows 8.1 and Chrome.

    • Andreas Mitschke

      Use inview.js https://github.com/protonet/jquery.inview – it’s just 1kb, but doesn’t offer the convenience of data binding, which on the other hand means you can use it as you wish without modifying it. You can use on() jquery to trigger inview according to an event.

      If you want more than that take a look at scrollmagic https://github.com/janpaepke/ScrollMagic
      It’s 14kb, without modification, but basically offers everything one might desire regarding scrolling events.

  • Chu Quang Tú

    you always intro to us amazing js library. You’re doing great. Thanks so much.

  • Steve Husting

    Your CSS examples should define heights of 800-1000px, not 100px. then we’ll actually see them appear as we scroll down. Right now they just pop on as soon as we see them – without scrolling.

  • http://stackpie.com Adegbuyi Ademola

    Thanks!

  • Martinneke

    Is it possible to set the moment of reveal? By default scrollReveal.js
    lets elements enter the viewport when scolling halfway down. I would like the reveal start a bit sooner.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.