Running CSS animations when the element is shown

Not a unique idea at all, many existing libraries out there, but I wanted a very basic jQuery plugin that I controlled entirely with CSS animations and classes being applied when the user scrolled to (or past) the element, along with a few key features: chaining animations to run in sequence, customisable delays and customisable visibility offsets.

Some code snippets from the example page. The get started, all you need to add to your page is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.animateOnShow.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="animations.css" media="screen" charset="utf-8">

then you can add the following classes to your page and the animations will work when the user scrolls to them:

<p class="animate-on-show fade-in">This text will fade in!</p>
<p class="animate-on-show slide-in-from-below fade-in">You can add multiple animations if wanted...</p>

<p class="animate-on-show fade-in" data-animate-chain="sequential-example">This will fade in first</p>
<p class="animate-on-show fade-in" data-animate-chain="sequential-example" data-animate-delay="500">Then this, 500ms later</p>
<p class="animate-on-show fade-in" data-animate-chain="sequential-example" data-animate-delay="1000">Then finally this after 1000ms!</p>

All delays are relative to the first element shown with a data-animate-chain attribute, so when this first element is shown, the timeouts are set up for all other elements with the same data-animate-chain attributes.

The CSS is pretty straightforward and some basic example animations are defined in animations.css

.animate-on-show { transition: all 1s ease-in-out; }
.animate-on-show.fade-in { opacity: 0; }
.animate-on-show.fade-in.animated { opacity: 1; }

The simplified example above controls the basis for the plugin, first all elements with an animate-on-show class are set up with a 1s animation. Then the child classes, in this case fade-in are defined with an initial state, and how it should end once the animation is applied (.animated). The plugin essentially just applies the animated class to each element that is deemed visible and CSS does the rest. The additional chaining happens at the same time along with accounting for delays.

There are some global settings you can define, including vertical adjustments for some classes. For example slide-in-from-below:

.animate-on-show.slide-in-from-below { transform: translate(0, 400px); }
.animate-on-show.slide-in-from-below.animated { transform: translate(0, 0); }

is configured with an initial state of 400px below the target end location, this means we have to adjust our offset by 400. The $.AnimateOnShow.settings.custom object handles this:

    $.AnimateOnShow = {
        settings: {
            /*snip*/
            custom: {
                // these can be used to adjust positioning, like with the example
                // slide-in-from-below, the calculation needs to take the initial
                // translate into consideration and so we add the 400 which is
                // missing due to the initial state.
                'slide-in-from-below': 400,
                'slide-in-from-above': -400
            }
        },
        /*snip*/
    }

If you’re adding in other animations that adjust the vertical position, be sure to add these to your version of the plugin or change in your page’s script via $.AnimateOnShow.settings.custom['your-classname-here'] = <adjustment>.

Hope this saves someone some time if they want to do something similar!

I’ve made it a fairly customisable package although it does currently rely on jQuery as the site for which this was originally developed already had it.

There’s a demo page that includes download links and you are free to use this code however you see fit!