Create Animations From A Sequence Of Images - jQuery Animate.js

Animate.js is a tiny jQuery plugin for creating chainable animations from a sequence of images. This plugin is used to combine a series of images together to create a GIF-style animated image.

It supports fadeIn/fadeOut/Reveal animations, custom image positions, and configurable animation delays. This way you can create simple/advanced/customizable animations without the hassle of writing any CSS or JavaScript animation codes.

How to use it:

1. Load the animate.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/animate.js"></script>

2. Create a container to hold the animation.

<div class="example"></div>

3. Add a set of animations to the animationSets array as follows.

var options = {

    // width & height in pixels
    'width': 813,
    'height': 614,

    // unique ID
    'id': 'jqueryscript',

    // define your animations here
    'animationSets': [
      new Animation([
        {
          // image source
          'imagesrc': 'images/chart-bg.jpg',
          // position
          'position': {
            x: 0,
            y: 0
          },
          'width': 813,
          'height': 614,
        }, {
          'imagesrc': 'images/gray-line-1.png',
          'position': {
            x: 164,
            y: 94
          },
          'width': 221,
          'height': 212,
          // reveal, fadeIn, or fadeOut
          'type': 'reveal',
          // duration in ms
          'duration': 500,
        }, {
          'imagesrc': 'images/orange-line-1.png',
          'position': {
            x: 164,
            y: 90
          },
          'width': 221,
          'height': 125,
          'type': 'reveal',
          'duration': 2000,
          // delay in ms
          'delay': 1000
        }
      ]),
      new Animation([
        {
          'imagesrc': 'images/orange-explanation.png',
          'position': {
            x: 634,
            y: 150
          },
          'width': 179,
          'height': 100,
          'type': 'fadeIn',
          'duration': 500,
          // unique ID
          'id': 'fadeout-2',
          'delay': 100
        }, {
          'imagesrc': 'images/gray-explanation.png',
          'position': {
            x: 170,
            y: 321
          },
          'width': 179,
          'height': 100,
          'type': 'fadeIn',
          'duration': 500,
          'id': 'fadeout-1',
        }
      ]),
      new Animation([
        {
          'imagesrc': 'images/2-lines.png',
          'position': {
            x: 385,
            y: 214
          },
          'width': 244,
          'height': 153,
          'type': 'reveal',
          'duration': 1000,
        }, {
          'type': 'fadeOut',
          'duration': 500,
          'id': 'fadeout-1',
        }, {
          'id': 'fadeout-2',
          'type': 'fadeOut',
          'duration': 500,
          'delay': 250
        }], true // true = trigger the animation on click/tap
      )
    ]
    
}

4. Initialize the plugin and render the animation in the container you just created.

var myAnimation = new AnimationLoader('.example', options);
myAnimation.init();

---

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