🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

loopyjs

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

loopyjs

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

1.0.0
latest
Source
npm
Version published
Maintainers
1
Created
Source

#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

Keywords

animationFrame

FAQs

Package last updated on 08 Jan 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts