Animate Elements In Sequence - jQuery CSS3 Animation Queue

Animate Elements In Sequence - jQuery CSS3 Animation Queue
File Size: 7.52 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

<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-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>

Changelog:

2018-08-04

  • set left offset elements as priority when sorting

2018-06-07

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.