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.

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
  resetDuration: 500, 

  // infinite loop
  infinity: true, 

  // enable autoplay
  autoplay : true,

  // enable controls
  controls: true,

  editor: {
    enable: false, // if true: show editor on page
    wrapper: '.jca-editor-container' // editor wrapper class
  },

  // use icons from an icon framework instead of css icons
  useIcons: false, 

  // icons
  icons: {
    backward: '<i class="fas fa-step-backward"></i>',
    play: '<i class="fas fa-play"></i>',
    pause: '<i class="fas fa-pause"></i>',
    stop: '<i class="fas fa-stop"></i>',
    forward: '<i class="fas fa-step-forward"></i>',
    expand: '<i class="fas fa-expand"></i>',
    editor: '<i class="fas fa-edit"></i>'
  },

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

  // custom controls
  controlsTemplate:
  '<div class="controls">' +
      '<div class="backward #BACKWARD#"></div>' +
      '<div class="play #PLAY#"></div>' +
      '<div class="pause #PAUSE#"></div>' +
      '<div class="reset #RESET#"></div>' +
      '<div class="forward #FORWARD#"></div>' +
      '<div class="fullscreen #FULLSCREEN#"></div>' +
  '</div>',

  // class of step backward button
  backwardButton: '.backward', 
  
  // class of step forward button
  forwardButton: '.forward', 

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

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

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

  // class of reset button
  stopButton: '.jca-stop', 

  // class of expand button
  expandButton: '.jca-expand', 

  // class of edit button
  editorButton: '.jca-editor',

  // class of goto button / add data-step="step-name"
  gotoButton: '.jca-goto',  

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

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

  // CSS class if user clicked forward
  classForward: 'forward', 

  // CSS class if user clicked backward
  classBackward: 'backward', 

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

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

$('#canvas').canvasAnimation({

  // called before first animation step
  onPlay: null, 

  // called after last animation step
  onDone: null, 

  // called if classWait was added
  onWait: null  
  
});

Changelog:

v2.1.0 (2021-11-14)

• Added gotoButton in options

v2.0.0 (2018-08-11)

• Added width, height, top, left in px on editor.

2018-05-06

• Fixed wrong css class in less and scss.
• Changed config names.

2018-04-27

• Added step forward / backward feature.

2018-04-22

• Added "Pause instantly" feature.

---

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