Scroll Animations

A jQuery plugin for scroll based transitions.

Animations will trigger when an element is scrolled into the viewport.

Built by Westley Mon at Mindgruve.

Getting Started

Dependencies

This plugin depends on jQuery.

An optional dependency is Animate.css. Custom CSS animations can be used, but they will need to be applied to a class. See Animate.css code for example.

How to use

1. Include Javascript

<script src="jquery.js"></script>
<script src="dist/jquery.scrollAnimations.js"></script>

2. Required CSS

[data-animation] {
    opacity: 0;
}

[data-animation].animated {
    opacity: 1;
}

3. Markup your elements

Animating a single element is simple!

<h1 data-animation="fadeInUp">Heading 1</h1>

• A single element uses a required [data-animation] attribute and an optional [data-animation-delay] attribute.

Animating a set of elements (staggered animations)

We also have the ability to build an timeline of animations based on the a single containing element scrolling into view!

<section data-animation-container>
    <div class="container">
        <div class="row">

            <div class="col-sm-6"
                 data-animation-child data-animation="fadeInUp"
                 data-animation-delay="0ms">
                [Something to animate in]
            </div>

            <div class="col-sm-6"
                 data-animation-child data-animation="fadeInUp"
                 data-animation-delay="500ms">
                [Something else to animate in]
            </div>

        </div>
    </div>
</section>

• A set of elements requires the [data-animation-container] attribute on a container element like the <section> above. When this element travels into the viewport, the animations for all "child" elements will kick off.
• The "child" elements, or the elements that will actually be animating, require the [data-animation-child] and [data-animation] attributes. The [data-animation-delay] attribute is optional, but as shown in the example above, the second column has a 500ms delay, giving it a staggered effect.

4. Initialize the plugin.

var $containers = $('[data-animation]:not([data-animation-child]), [data-animation-container]');
$containers.scrollAnimations();

That's it!

Configuration options

Option	Values	Default	Description
offset	decimal	0.8	Distance from top of viewport animations will begin, expressed in percentage of window height.

Example usage:

$('[data-animation]').scrollAnimations({
	offset: 0.5
});

Examples

For now, see demos/index.html.