LoopyJS

A polyfill and wrapper for requestAnimationFrame, providing common functionality for animation and timing loops

Build

Make sure you have grunt-cli installed

$ npm install

$ grunt build

Usage

Loop some code, and cancel the loop after 1000ms

var animation = loopy(function(deltaTime, timeElapsed){
    //deltaTime: time since last loop
    //timeElapsed: time since looping started

    if(timeElapsed) >= 1000){
        animation.cancel();
    }

    //your loop code here
    console.log("Here is another loop!");
});

You can use the this context

loopy(function(deltaTime, timeElapsed){
    if(timeElapsed >= 1000){
        this.cancel();
    }
});

You can access other less common information with this context

loopy(function(deltaTime, timeElapsed){
    console.log("Currently running frame number: " + this.frame);
});

You can use loopy.request like you would normally use requestAnimationFrame, except the callback time is given as time since the request, instead of currentTime

loopy.request(function(deltaTime){
    console.log("It was " + deltaTime + "since we made the request to run this code");
});

You can use built-in animation helpers.

var options = {
    initial : 100,
    halflife : 1000, //miliseconds
    growth: false, //true for growth instead of decay
};

loopy.exponential(function(value, deltaTime, timeElapsed){
    console.log("Exponentially decreasing value : " + value);
}, options);

var options = {
    amplitude: 100,
    phase: 0, //radians
    period: 1000, //miliseconds
};

loopy.sinusoidal(function(value, deltaTime, timeElapsed){
    console.log("Sinusoidal value : " + value);
}, options);

You should never place code inside an event handler that is listening to the window scroll event. This is because the scroll event can be fired a lot more than is needed, slowing down the browser. Instead, you can use the loopy.scroll(callback); method

loopy.scroll(function(deltaTime, timeElapsed){
    var scrollPosition = window.pageYOffset;

    //react to a change in scroll position here...
});

Contributing

All help is welcome!

Possible future updates include

• More tests
• Examples
• Wrapper for common animations
  • Linear
  • Bezier easing
• Animation time config
• Play / Pause / Rewind methods