Animate Elements On Scroll Using jQuery and Animate.css - Aniview

Aniview is a lightweight jQuery plugin which detects the scroll event and triggers Animate.css powered CSS3 animations when elements become visible in the viewport.

See also:

How to use it:

1. Load the required animate.css in the head section of the document.

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

2. Load jQuery library and the jQuery aniview plugin at the bottom of the document

<script src="//code.jquery.com/jquery-VERSION.min.js"></script>
<script src="jquery.aniview.js"></script>

3. Add the CSS style 'aniview' to the elements and use data-av-animation attribute to specify the Animate.css's CSS3 animation you want to use.

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

4. Enable the plugin with default 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);

5. Enable the plugin with default 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);

Changelog:

2019-05-15

• Refactor/tidy up of scrolled() plugin and vieweport checking logic

2016-01-08

• fixed anonymous function

This awesome jQuery plugin is developed by jjcosgrove. For more Advanced Usages, please check the demo page or visit the official website.