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

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

Compatible with both Animate.css 3.x and Animate.css 4.x.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• jQuery Plugin To Animate Content As User Scrolls - scrollex
• jQuery Plugin To Animate Elements When They Scroll Into View - inview
• Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability
• 10 Best Scroll-triggered Animation Plugins With jQuery And Pure JavaScript

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 end of the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/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="ANIMATION NAME">
    jQuery Aniview Plugin Demo
</h1>

4. Initialize the plugin on the element and done.

// 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);

Changelog:

2021-08-01

• Add support for Animate.css v4+.

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.