Sequential Animation Library For jQuery - Canvas Animation

Sequential Animation Library For jQuery - Canvas Animation
File Size: 18.3 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
  resetDuration: 500, 

  // infinite loop
  infinity: true, 

  // enable autoplay
  autoplay : true,

  // enable controls
  controls: true,

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

  // 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 fullscreen button
  fullscreenButton: '.fullscreen', 

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

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.