Animate Elements In Sequence - jQuery CSS3 Animation Queue

CSS3 Animation Queue is a jQuery plugin that uses CSS3 animations to animate desired elements in sequence when they're scrolled into view.

Installation:

# NPM
$ npm install jquery-css3-animation-queue --save

# Bower
$ bower install jquery-css3-animation-queue --save

How to use it:

1. Include a CSS3 animation library of your choice (for example animate.css) in the web page.

<link rel="stylesheet" href="animate.min.css">

2. The required CSS rule.

.animated.standby {
  -webkit-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
  visibility: hidden;
}

3. Add the CSS class 'standby' and other animation classes to the target elements as follows:

<h2 class="animated standby slideInLeft">This comes in from the left.</h2>
<h3 class="animated standby slideInRight">And then this comes in from the right.</h3>

4. Include jQuery library and the jQuery CSS3 Animation Queue's script jquery-css3-animation-queue.js at the bottom of the page. Done.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="jquery-css3-animation-queue.js"></script>

5. Specify the time to wait before triggering the CSS animations. Default: 300.

<h2 class="animated standby slideInLeft" data-delay="2000">This comes in from the left.</h2>
<h3 class="animated standby slideInRight" data-delay="6000">And then this comes in from the right.</h3>

6. Specify the distance from top of the page to trigger the CSS animations.

<h2 class="animated standby slideInLeft" data-offset="200">This comes in from the left.</h2>
<h3 class="animated standby slideInRight" data-offset="600">And then this comes in from the right.</h3>

Changelog:

v1.1.0 (2019-05-16)

• reduce default delay to 300ms

2018-12-18

• immediate animation to grab items from queue

2018-10-10

• add option to immediately trigger elements above fold

2018-08-04

• set left offset elements as priority when sorting

2018-06-07

• JS Update

2018-06-06

• v1.0.6: allow override of default settings

2018-05-31

• v1.0.5: inverted offset math fix

---

This awesome jQuery plugin is developed by Richard1320. For more Advanced Usages, please check the demo page or visit the official website.