jQuery AniView

Written by Jonathan James Cosgrove

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView is a minimal (~1KB) jQuery plugin that allows you to add animations to your webpages with nothing more than a class identifier and a single data attribute. There are also a couple of optional... options.

Scroll down to see how it works!

Initialisation:

$('.aniview').AniView();

Options:

var options = {
    animateThreshold: 100,
    scrollPollInterval: 20
}
$('.aniview').AniView(options);
OptionTypeDescriptionDefault
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

Markup:

<div class="aniview" data-av-animation="slideInRight"></div>

As you scroll down the page, each animation is triggered when the threshold is met. i.e. when it comes into view by way of the bottom of the user's screen (viewport).

Since it uses the freakin awesome animate.css - it supports all of the same animations that it does.

All you have to do is simply declare what you want to use via the data-av-animation attribute.

You could even set up some custom animation classes so that animations occur in a specific order, e.g:

.fast {
    -vendor-animation-duration: 1s;
    -vendor-animation-delay: 0s;
}
.slow {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 1s;
}
.reallyslow {
    -vendor-animation-duration: 6s;
    -vendor-animation-delay: 3s;
}
<div class="aniview fast" data-av-animation="fadeIn">
<div class="aniview slow" data-av-animation="fadeIn">
<div class="aniview reallyslow" data-av-animation="fadeIn">
That should be enough to get you up and running! Check it out!