Revealing Elements with scrollReveal.js

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 div

s . 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.

Frequently Asked Questions (FAQs) about ScrollReveal.js

What is ScrollReveal.js and why is it useful?

ScrollReveal.js is a JavaScript library that allows you to create and control web page elements’ animations when they enter (or exit) the viewport. It’s useful because it provides a simple way to add a dynamic, engaging element to your website. With ScrollReveal.js, you can create a more interactive user experience, guiding your visitors’ attention to specific parts of your page at the right time.

How do I install ScrollReveal.js?

To install ScrollReveal.js, you can use npm or yarn. For npm, use the command npm install scrollreveal. For yarn, use yarn add scrollreveal. Alternatively, you can include it directly in your HTML using a CDN.

How do I use ScrollReveal.js in my project?

After installing ScrollReveal.js, you can use it in your project by calling the ScrollReveal() function and using the .reveal() method on the elements you want to animate. You can pass various options to the .reveal() method to control the animation’s nature.

Can I control the timing of the animations with ScrollReveal.js?

Yes, ScrollReveal.js allows you to control the timing of the animations. You can set the duration, delay, and easing of the animations using the options object passed to the .reveal() method.

How can I animate multiple elements with ScrollReveal.js?

To animate multiple elements with ScrollReveal.js, you can pass a CSS selector that matches multiple elements to the .reveal() method. ScrollReveal.js will animate all the matching elements.

Can I use ScrollReveal.js with other JavaScript libraries or frameworks?

Yes, ScrollReveal.js can be used with other JavaScript libraries or frameworks. It’s a standalone library, so it doesn’t have any dependencies and won’t conflict with other libraries or frameworks you’re using.

Is ScrollReveal.js responsive? Will it work on mobile devices?

Yes, ScrollReveal.js is responsive and will work on mobile devices. The animations will trigger based on the viewport, so they’ll work regardless of the device’s screen size.

Can I use ScrollReveal.js to animate elements when they exit the viewport?

Yes, ScrollReveal.js can animate elements when they exit the viewport. You can use the reset option to make an element animate every time it enters or exits the viewport.

How can I troubleshoot issues with ScrollReveal.js?

If you’re having issues with ScrollReveal.js, you can check the JavaScript console for any error messages. These messages can give you clues about what’s going wrong. You can also refer to the ScrollReveal.js documentation or ask for help on the GitHub issues page.

Is ScrollReveal.js free to use?

Yes, ScrollReveal.js is free to use. It’s open-source software, released under the MIT license, which means you can use it in your projects without any cost.