The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or click here to continue anyway

4.0.0 released: The new render loop explained | Popmotion

4.0.0 released: The new render loop explained

At the heart of Popmotion lies a single thread; the render loop. Its purpose is simply to run through all active Process instances, and fire their associated callbacks - once per frame, 60 frames per second.

Every Actor has its own Process instance, so when you run your own Process, youre running a method in tandem with all your other animations and simulations without having to manage your own render loop.

Popmotion is already unique in exposing access to this loop, and with the release of 4.0.0, it now provides two new methods of control and scheduling.

The first, four new processing steps that allow more control over where in the render loop a Process will fire. The second, background processes that run only when other processes are active.

Discrete processing steps

In previous versions, a Process would represent a single callback, and every Process callback would be fired sequentially. So, Actors would update their values, render, and check if theyre still active, all at once, one Actor after the other. This made it impossible to work with all the updated Actors before they were all rendered.

From today, there are four steps to the render loop:

Now, all active Process.update methods will fire first, then all active Process.preRender methods, and so on.

Assigning a method to run at any of these four steps is easy. Heres a crude framerate counter to demonstrate:

import { Process } from 'popmotion';

let framerateDisplay = document.getElementById('framerate');
let framerate = 0;

let updateFramerate = new Process({
    update: function (process, framestamp, frameDuration) {
        framerate = 1000 / frameDuration;
    render: function () {
        framerateDisplay.innerHTML = framerate;


Soon, well be releasing a collision detection plugin that will make use of the preRender method to recalculate Actor positions before render. Canvas and WebGL applications could harness postRender to implement post-processing effects.

Background processes

By default, our render loop stops running if it detects no active processes, and starts again when the next process starts, which helps save battery life on mobile devices.

Flagging a Process as a background process will ensure that it only runs when other, non-background processes are active.

Our previous example of a framerate counter shows how this could be helpful. Itd be a waste to update the framerate counter when were not running any Processes. By passing true as the last argument to our Process constructor, we can flag it as a background process.

let updateFramerate = new Process(yourCallbacks, true);


The updateFramerate callbacks wont start until another, non-background Process begins to run, or an Actor begins to animate.

Upgrade to 4.0.0

If youve never used Process before, and as a low-level class you probably havent, then you can simply upgrade.

For those of you that have ventured this far down, as part of reevalutating the Process class we decided to add once() and remove start(duration) and every() to reduce our API footprint and overall internal complexity. So:




setTimeout(() => process.stop(), 500);




setInterval(() => process.once(), 200);

Were committed to keeping Popmotion lightweight and at 12.6kb it is easily one of the smallest motion engines for the web, while still providing an unprecedented level of functionality and compatibility. Small changes like this allow us to keep delivering big changes like the new render loop and background processes.

As always, keep in touch with questions, suggestions or cool stuff youve made via our Twitter.

Continue reading on