Sequential Animation Library For jQuery - Canvas Animation

Sequential Animation Library For jQuery - Canvas Animation

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

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

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.


5. More configurations to customize the sequential animations.

  // 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
    '<div class="controls">' +
        '<div class="play #PLAY#"></div>' +
        '<div class="pause #PAUSE#"></div>' +
        '<div class="reset #RESET#"></div>' +
        '<div class="fullscreen #FULLSCREEN#"></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.

  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.

  • Publication date: 16.04.2018
  • Source