Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including animation with all npm packages installed. Try it out:

var animation = require("animation")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

animation v0.1.3

animation timing & handling


Handles Animation Timing and Handling for you.

Uses requesAnimationFrame when running on browser side.


$ npm install animation


// get a tick every 100ms
var animation = new Animation({frame:'100ms'});
animation.on('tick', function (dt) { … });
// get next tick with delta time to last tick
var animation = new Animation({frame:'100ms'});
var animate = function (dt) {

    // do your animation stuff

    if (process.stdout.write(data)) {
    } else {
        var t = new Date().getTime()
        process.stdout.once('drain', function () {
            var now = new Date().getTime();
            animate(now - t + dt);
animation.nextTick(animate); // no start required
// doesnt really matter when its executed, but it should happen
// (use this in browser if you want to update your dom on requesAnimationFrame)
var animation = new Animation();
animation.push(function (dt) {
    // happens (once) on the next few ticks,
    // depending on how much tasks are allready pushed

Δt adapters for DOM and jQuery depending on this module to do heavy DOM manipulation like insertion only on requesAnimationFrame.

surrender-cube uses this module to draw a rotating wireframe cube in terminal.

ceilingled uses this to draw images fetched from superfeedr to draw either on SDL or on a LED wall.


animation = new Animation({
    // defaults
    timeoutexecution:'20ms', // allowed execution time per animation tick timeout
    execution: '5ms', // allowed execution time per animation tick
    timeout:   null,  // maximum time of a animation tick interval else runs continuously if null
    toggle:    false, // if true animation pauses and resumes itself when render queue gets empty or filled
    frame:     '16ms' // time per frame

Creates a new Animation controller.



Starts animation.



Stops animation.



When autotoggle is enabled the Animation pauses itself if the render queue is empty.



When autotoggle is enabled the Animation resumes itself when the render queue gets filled again after it was emtpy.


animation.nextTick(function (dt) { … });

Given callback gets called on next animation tick when running and not paused.



animation.on('start', function () { … });

Emits start event every time the animation gets started.


animation.on('stop', function () { … });

Emits stop event every time the animation gets stopped.


animation.on('pause', function () { … });

Emits pause event every time the animation gets paused.


animation.on('resume', function () { … });

Emits resume event every time the animation gets resumed.


animation.on('tick', function (dt) { … });

Emits tick event every time the animation executes a animation tick.

dt is the time since last animation tick finished.

Use this to do your animation stuff.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free