Small Performant Animation JavaScript Library – jsAnimator

jsAnimator is a lightweight, blazing fast JavaScript animation library used to handle animations on any elements using requestAnimationFrame API.

Basic usage:

Download and import the jsAnimator library into the document.

<script src="./src/jsAnimator.js"></script>

Add a new animation to an element. This example show how it is possible use jsAnimator to animate html element using css.

jsAnimator.add({
  handle: document.getElementById("example"),
  position : {
      w: 30,
      h: 30,
      t: 0,
      l: 0
  },
  /**
   * the div will translate to left each iteration by 5 px and it will increase its width by 2px
   */
  fn_update : function(){
      this.position.l += 5;
      this.position.w += 2;
  },
  /**
   * animation stop when rectangle position reach 500px to the left
   */
  fn_stop : function(){
      return (this.position.l >= 500)
  },
  /**
   * draw the rectangle by setting its style with css
   */
  fn_draw : function(){
      this.handle.style.left = this.position.l + "px";
      this.handle.style.width = this.position.w + "px";
      this.handle.style.height = this.position.h + "px"
  }
});

Start the animation.

jsAnimator.animationStart();

More API.

jsAnimator.setGlobalOnFrameRenderEnd()
jsAnimator.setGlobalOnFrameRenderStart()
jsAnimator.animationStop()
jsAnimator.animationToggle()
jsAnimator.renderNext
jsAnimator.length

Check out more examples in the zip for more usages.