https://academieandredelvaux.com/js/waypoints.js

1/*========== WAYPOINTS ==========*/
2$(function(){ // a self calling function
3    function onScrollInit( items, trigger ) { // a custom made function
4        items.each( function() { //for every element in items run function
5        var osElement = $(this), //set osElement to the current
6            osAnimationClass = osElement.attr('data-animation'), //get value of attribute data-animation type
7            osAnimationDelay = osElement.attr('data-delay'); //get value of attribute data-delay time
8
9            osElement.css({ //change css of element
10                '-webkit-animation-delay':  osAnimationDelay, //for safari browsers
11                '-moz-animation-delay':     osAnimationDelay, //for mozilla browsers
12                'animation-delay':          osAnimationDelay //normal
13            });
14
15            var osTrigger = ( trigger ) ? trigger : osElement; //if trigger is present, set it to osTrigger. Else set osElement to osTrigger
16
17            osTrigger.waypoint(function() { //scroll upwards and downwards
18                osElement.addClass('animated').addClass(osAnimationClass); //add animated and the data-animation class to the element.
19                },{
20                    triggerOnce: true, //only once this animation should happen
21                    offset: '100%' // animation should happen when the element is 70% below from the top of the browser window
22            });
23        });
24    }
25
26    onScrollInit( $('.os-animation') ); //function call with only items
27    onScrollInit( $('.staggered-animation'), $('.staggered-animation-container') ); //function call with items and trigger
28});