Sequential Animation Library For jQuery - Canvas Animation

File Size: 1.65 MB
Views Total: 2037
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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
  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
  '<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>' +

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


  // called before first animation step
  onPlay: null, 

  // called after last animation step
  onDone: null, 

  // called if classWait was added
  onWait: null  


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.


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


  • Added step forward / backward feature.


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