Quick Tip: Scroll Animations With fullPage.js and Animate.css

In a previous tutorial, I introduced you to fullPage.js, a popular jQuery plugin for building full-screen pages. In this quick tip, I’ll show you how to create scroll-based animations with fullPage.js and animate.css.

Required Libraries

For the purposes of this example, I set up a demo page. If you look under the Settings tab, you’ll see I included the following libraries to the pen:

fullPage.js
animate.css
jQuery
Bootstrap

The Bootstrap framework isn’t vital; I added it only because I wanted to take advantage of its styles.

The Process

Our page comprises four sections; each one filling the page (thanks to fullPage). Users will jump to the next section by scrolling, or navigating via the pagination links on the right. Each time that happens we’ll trigger some animations, like bringing the images into position, for example.

Before showing the code that fires the animations, let’s first cover the required steps:

We need to take advantage of the “callback” functions that fullPage provides. More specifically, in our case, we want to animate the second, third, and fourth sections, so we’ll use the onLeave callback. If we wanted to animate the first section, we could have used the afterLoad callback. In the same way, for animating the slides we should use the afterSlideLoad and onSlideLeave functions.
We’ll dynamically add CSS animations provided by the animate.css library using jQuery.
We’ll also animate elements sequentially using the animate-delay CSS property.

Now, let’s dive into the animations!

Animation #1

The second section of the page includes three images and one button. Here’s its structure:

      <section class="section second">
          <div class="container">
              <div class="row">
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/nature">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/people">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/tech">
                  </div>
                  <div class="col-xs-12 text-center is-animated__single">
                      <button type="button" class="btn btn-lg">A Simple Button</button>
                  </div>
              </div><!--end of row-->
          </div><!--end of container-->
      </section>

Notice that we’ve added the is-animated and is-animated__single classes to the elements that we want to animate. Additionally, keep in mind that the elements with the is-animated class will share the same animation effect (e.g. fadeInUpBig).

The jQuery code that triggers the animations for this section looks like this:

      var $isAnimatedSecond = $('.second .is-animated'),
          $isAnimatedSecondSingle = $('.second .is-animated__single');

      /* this code is part of the onLeave callback */    
      if( index == 1 && nextIndex == 2 ) {
          $isAnimatedSecond.addClass('animated fadeInUpBig'); 
          $isAnimatedSecond.eq(0).css('animation-delay', '.3s');
          $isAnimatedSecond.eq(1).css('animation-delay', '.6s');
          $isAnimatedSecond.eq(2).css('animation-delay', '.9s');
          $isAnimatedSecondSingle.addClass('animated rollIn').css('animation-delay', '1.7s');
      }

In this example, when we leave the first section and move to the second one, we apply two different animations (i.e. fadeInUpBig and rollIn) to the target elements. In addition, we use the animation-delay CSS property to specify when those animations should start.

Animation #2

The third section contains two images and one button. Below you can see the corresponding HTML code:

      <section class="section third">
      	<div class="container">
      		<div class="row">
      			<div class="col-sm-3 col-sm-offset-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/tech">
      			</div>
      			<div class="col-sm-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/any">
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
      				<button type="button" class="btn btn-lg">A Simple Button</button>
      			</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

As with the previous example, we’ve added the is-animated and is-animated__single classes to the desired elements.

The jQuery code looks like the following:

        var $isAnimatedThird = $('.third .is-animated'),
            $isAnimatedThirdSingle = $('.third .is-animated__single');

        /* this code is part of the onLeave callback */
        if( ( index == 1 || index == 2) && nextIndex == 3 ) {
            $isAnimatedThird.eq(0).addClass('animated fadeInRightBig').css('animation-delay', '.3s'); 
            $isAnimatedThird.eq(1).addClass('animated fadeInLeftBig').css('animation-delay', '.6s');
            $isAnimatedThirdSingle.addClass('animated bounceInDown').css('animation-delay', '1.2s');
        }

In this section, we use the fadeInRightBig and fadeInLeftBig animations to sequentially show the images. Furthermore, we show the button using the bounceInDown animation.

Animation #3

The fourth section consists of three elements: two paragraphs and one button. See how it’s structured below:

      <section class="section fourth">
      	<div class="container">
      		<div class="row">
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
                	<button type="button" class="btn btn-lg">Thank You!</button>
        		</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

Once again, notice that we’ve given target elements the is-animated and is-animated__single classes.

Next, have a look at the associated jQuery code:

      var $isAnimatedFourth = $('.fourth .is-animated'),
          $isAnimatedFourthSingle = $('.fourth .is-animated__single');

      /* this code is part of the onLeave callback */
      if( ( index == 1 || index == 2 || index == 3 ) && nextIndex == 4 ) {
          $isAnimatedFourth.addClass('animated zoomIn').css('animation-delay', '.6s');
          $isAnimatedFourthSingle.addClass('animated lightSpeedIn').css('animation-delay', '1.2s')
          $isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass('lightSpeedIn').addClass('zoomOutDown');
          });
      }

Here, both paragraphs appear at the same time using the zoomIn animation. On the contrary, the button appears using the lightSpeedIn animation.

Moreover, the following code helps us detect when an animation ends:

      $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

In our example, we show the button only for a few seconds and then we take advantage of the aforementioned code to hide it.

Below you can see the embedded Codepen demo (though the full page demo is far more effective):

Conclusion

In this quick tip, we learned how we can combine the fullpage.js and animate.css libraries to build scroll-based animations.

If you want to improve this demo, here are two things you might want to try:

Enable the animations only on large screens. To achieve this, use the matchMedia method.
Make the code within the onLeave function more reusable.