jQuery Plugin that Animate Elements On Scroll

AniView is a jQuery plugin that works in harmony with animate.css to enable animation only when content is displayed. The v4.x version of animate.css is now supported.

Notes – Any element that is already in the viewport when the user loads the page its animation will be triggered immediately if one is set. In other words, the user will not wait for scrolling to start before starting the animation on these elements.

animate div on scroll jquery, animation on scroll up and down, animate on scroll github, animate scroll demo, page scroll animation, scrollreveal

How to make use of it:

1. Load the required animate.css within the head part of the doc.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/VERSION/animate.min.css" />

2. Load jQuery library and the jQuery aniview plugin on the finish of the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.aniview.js"></script>

3. Add the CSS model ‘aniview’ to the elements and use data-av-animation an attribute to specify the Animate.css’s CSS3 animation you need to use.

<h1 class="aniview" 
    data-av-animation="ANIMATION NAME">
    jQuery Aniview Plugin Demo
</h1>

4. Initialize the plugin on the component and executed it.

// Animate v4.x
$('.aniview').AniView({
  animateClass: 'animate__animated'
});

// Animate v3.x
$('.aniview').AniView();

5. Full plugin options.

var options = {

    // delay the animation sequence until '100' pixels have come into view
    animateThreshold: 100,

    // The frequency of which the user scrolling is 'tested'. 
    scrollPollInterval: 20
}
$('.aniview').AniView(options);

Option	Type	Description	Default
animateClass	string	the animate.css class to use: ‘animated’ enables v3.x support and ‘animate__animated’ to enable v4.x support	animated
animateThreshold	int	+ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view.	0
scrollPollInterval	int	The frequency at which user scrolling is ‘polled’ i.e. tested. This is in milliseconds (ms) and is an extension to jQuery’s in-built ‘scroll’ event/handler.	20