jQuery Plugin that Animate Elements On Scroll | Aniview

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

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

// Animate v4.x
  animateClass: 'animate__animated'

// Animate v3.x

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
animateClassstringthe animate.css class to use: ‘animated’ enables v3.x support and ‘animate__animated’ to enable v4.x supportanimated
animateThresholdint+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
scrollPollIntervalintThe 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

Animate Elements On Scroll, jQuery AniView Plugin/Github, scroll based animation, wow js npm

See Demo And Download

Official Website(jjcosgrove): Click Here

This superior jQuery/javascript plugin is developed by jjcosgrove. For extra Advanced Usages, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…