Show Animations in Browser Viewport

waypoints-enqueue.php

<?php

add_action( 'wp_enqueue_scripts', 'prefix_in_browser' );
/**
 * Enqueuing Waypoints & CSS Animate
 * 
 */
function prefix_in_browser() {
        wp_enqueue_script( 'waypoints-init', get_stylesheet_directory_uri() . '/js/waypoints.init.js', array( 'waypoints' ), '1.0.0', true );  
        wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/jquery.waypoints.min.js', array( 'jquery' ), '4.0.1', true );  
        wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.min.css', '3.7.0', 'all'); 
}

waypoints-init.js

jQuery(document).ready(function($) {

  $('#selector').waypoint(function() { // Add in your CSS selector
        $('#selector').addClass("animated jello") ; // Change your CSS selector and use addClass to add 'animated' and the CSS Animation name
    }, {
        offset: '80%' // Change % for animation to start from distance to top of browser when element comes into the viewport
    });

});