FrameRat.js

An open source animation frame library written in TypeScript.

About

The purpose of this library is to provide a simple way to control an animation while providing useful methods to monitor it and polyfills.

Check Example and Code section for more information on how to use FrameRat.js.

You can help develop FrameRat.js on Github.

Example

Code

Javascript (main.js)

Instantiate an animation with an onAnimate callback .

var animation = new FRAMERAT.Player(render);

Render function

function render(){
  clearFrame();
  drawStuff();
  animation.requestNewFrame();
}

Play, Pause, Stop functions

function playAnimation(){
  var state = animation.toggle();
  if(state === 'running') {
    playButton.innerHTML = "";
  }else if (state === 'paused') {
    playButton.innerHTML = "";
  }
}

function stopAnimation () {
  animation.stop();
  clearFrame();
  playButton.innerHTML = "";
}

Contact me

Feel free to ask me about my work, give me suggestions, or just to say hi.