Sequential Animation Library For jQuery - Canvas Animation

Sequential Animation Library For jQuery - Canvas Animation
File Size: 16.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Canvas Animation is a jQuery plugin that applies controllable, sequential animations to single or multiple elements using JavaScript and CSS styles.

How to use it:

1. Insert jQuery library (slim build) and the jQuery Canvas Animation plugin's JavaScript & Stylesheet into the html file.

<link href="jquery.canvas-animation.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.canvas-animation.min.js"></script>

2. Create a group of elements you wan to animate.

<div id="canvas" class="demo">
  <div class="square red"></div>
  <div class="square green"></div>
  <div class="square blue"></div>
</div>

3. Create step-by-step animations by adding CSS classes and durations to the elements as follows:

var myConf = {
    steps : [
      {
          addClass : 'ca-1',
          duration : 800
      },
      {
          addClass : 'ca-2',
          duration : 800
      },
      {
          addClass : 'ca-3',
          duration : 800
      },
      {
          addClass : 'ca-4',
          duration : 500
      }
    ]
};

4. Apply the sequential animations to the elements and done.

$('#canvas').canvasAnimation(myConf);

5. More configurations to customize the sequential animations.

$('#canvas').canvasAnimation({

  // starts the animation after this timeout
  // 0 = starts immediately
  timeout: 0, 

  // reset duration in milliseconds
  reset_duration: 500, 

  // infinite loop
  infinity: true, 

  // enable autoplay
  autoplay : true,

  // enable controls
  controls: true,

  // fontawesome version (4 or 5)
  controls_fa: null, 

  // class of controls wrapper
  controls_wrapper: '.controls', 

  // custom controls
  controls_template:
    '<div class="controls">' +
        '<div class="play #PLAY#"></div>' +
        '<div class="pause #PAUSE#"></div>' +
        '<div class="reset #RESET#"></div>' +
        '<div class="fullscreen #FULLSCREEN#"></div>' +
    '</div>',

  // class of play button
  play_button: '.play', 

  // class of pause button
  pause_button: '.pause', 

  // class of reset button
  reset_button: '.reset', 

  // class of fullscreen button
  fullscreen_button: '.fullscreen', 

  // CSS class if the animation is done
  class_done: 'done', 

  // CSS class if the animation is paused
  class_wait: 'wait',

  // class of elements wrapper
  class_wrap: 'canvas-animation',
  
});

7. Useful callback functions which will be fired when the animation starts or is paused/finished.

$('#canvas').canvasAnimation({

  callback_play: null,
  callback_done: null,
  callback_wait: null

});

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