jQuery AniView

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

**update** Now supports v4 of animate.css

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 = {
    animateClass: 'animated', // for v3 or 'animate__animated' for v4
    animateThreshold: 100,
    scrollPollInterval: 20
}
$('.aniview').AniView(options);

Option	Type	Description	Default
animateClass	string	the animate.css class to use: 'animated' enables v3.x support and 'animate__animated' to enable v4.x support	animated
animateThreshold	int	+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
scrollPollInterval	int	The 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 v3:

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

Markup v4:

Remember to set 'animateClass' in the options to 'animate__animated'

<div class="aniview" data-av-animation="animate__jackInTheBox"></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;
}

That should be enough to get you up and running! Check it out!