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 fps-throttle with all npm packages installed. Try it out:

var fpsThrottle = require("fps-throttle")

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

fps-throttle v1.0.2

Create animations with limited framerate.

throttledAnimation (fps-throttle) : JS Animation framerate limiter

This simple crossbrowser library helps you to limit the framerate of an animation. It has incorporated an interface to the fps-observer module, which provides useful information about the effective framerate of an animation (with stabilized values).

See a visual example of FPS throttler in action here

Usage examples

Automatic mode :

import {throttledAnimation} from './fps-throttle.js';

let myAnimation = new throttledAnimation( timestamp=>{
    console.log( 'Framerate :' , myAnimation.fps );
    /* 
    * this is your animation cycle loop ... 
    * throttled at 30 fps (±1 fps) 
    */
} , 30 );

Constructor Syntax :

new throttledAnimation( cycleCallback , throttleValue ); 

Parameters :

  • cycleCallback : Function to be executed in each loop cycle. (Callback receives a timestamp as first argument.)
  • throttleValue : Integer that represents the FPS limit of the animation

Returns:

  • new throttledAnimation instance object

Properties and methods :

The throttledAnimation Constructor will create and init a new throttledAnimation instance and return an object with the following properties and methods :

  • throttledAnimation.prototype.throttle : Integer. Can be changed to assign a new throttling value
  • throttledAnimation.prototype.fps : Integer. Holds the value of the effective framerate
  • throttledAnimation.prototype.fpsObserve : Boolean. Framerate observation can be disabled to win some extra performance.
  • throttledAnimation.prototype.stop() : Stops the animation
  • throttledAnimation.prototype.start() : Starts (or restarts) a stopped animation.

Package distribution

This library can be obtained using any of the following methods :

Npm : Install using the package manager

$ npm install fps-throttle -s

Git : Clone from Github... (Or download the latest release here)

$ git clone https://github.com/colxi/fps-throttle

CDN : Inlcude the latest release of the library in your HTML head

Warning : Not recomended for production enviroments!

<script src="https://colxi.info/fps-throttle/src/main.js" type="module"></script>

When including in the header, the throttledAnimation Constructor becomes available in window.throttledAnimation

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