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 theafterLoad
callback. In the same way, for animating the slides we should use theafterSlideLoad
andonSlideLeave
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:
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:
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:
Some text here
Some text here
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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post