raf

What is raf?

The raf npm package provides a simple and efficient way to use requestAnimationFrame in web browsers, with polyfills for unsupported environments. It's primarily used for creating smooth animations and handling frame-based updates in web applications.

What are raf's main functionalities?

Basic Animation Loop

This demonstrates how to create a basic animation loop using raf. The `raf` function is called with a callback function (`tick`), which will be executed before the next repaint. The `tick` function then calls `raf` with itself to continue the loop.

var raf = require('raf');
raf(function tick() {
  // Animation or frame update logic here
  raf(tick);
});

Canceling an Animation Frame

This example shows how to schedule an animation frame and then cancel it. The `raf` function returns a handle that can be used with `raf.cancel` to prevent the scheduled callback from executing.

var raf = require('raf');
var handle = raf(function() {
  // Animation or frame update logic here
});
// Cancel the scheduled frame update
raf.cancel(handle);

Other packages similar to raf

animation-frame

Provides a similar functionality to raf for managing animation frames, but it includes additional features for managing the timing and sequencing of multiple animations, which might make it a better choice for complex animations.

README

raf

requestAnimationFrame polyfill for node and the browser.

var raf = require('raf')

raf(function tick() {
  // Animation logic
  raf(tick)
})

Note: The stream/event emitter logic found in versions prior to 1.0.0 can be found in raf-stream.

API

Documentation at Mozilla Developer Network, W3 Specification

var raf = require('raf')

var handle = raf(callback)

callback is the function to invoke in the next frame. handle is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value.

raf.cancel(handle)

handle is the entry identifier returned by raf(). Removes the queued animation frame callback (other queued callbacks will still be invoked unless cancelled).

raf.polyfill()

Shorthand to polyfill window.requestAnimationFrame and window.cancelAnimationFrame if necessary (Polyfills global in node).

Alternatively you can require raf/polyfill which will act the same as require('raf').polyfill().

Acknowledgments

Based on work by Erik Möller, Paul Irish, and Tino Zijdel (https://gist.github.com/paulirish/1579671)

license

MIT