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

Animate Elements On Scroll Using jQuery and Animate.css - Aniview
File Size: 7.33 KB
Views Total: 7615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.