Performance Considerations

Building Programs

In order for an animation to play, a WEBGL program must be built behind the scenes. This unfortunately causes the screen to completely freeze until the program is complete (~150ms depending on the system).

We are looking closely into new technologies that may provide a solution to this problem, however for now there is no way around this. Therefore it is strongly advised to load any animations you plan to use at the very start of loading a page where the screen freeze will not be noticable.

The drawback to this of course, is every animation you load requires assets to be downloaded from our CDN. This gets in the way of loading the minimal amount of assets needed to display a page.

In response to this we have created a function similar to FP.loadAnimation, but instead of loading an entire animation, it only loads a small json file needed to build a program.

FP.loadProgram(frame, packageData, apiKey).then(function(){
  // The program has been sucessfully built

The "FP.loadProgram" function does not resolve anything meaningful, as it is not possible to pass WEBGL programs around like JS object. Instead the program gets saved to the Canvas element you provided in the frame object.

When you call "FP.loadAnimation" in the future, as long as you use the same frame object & the same packageData object, the program will be refrenced within the canvas and will not need to be rebuilt.


FirePro was built from the ground up for speed, however there is always the possibility someone is using an older device that struggles to play animations.

For this reason we have included a limiter that turns off several effects & processing intensive parts of animations.

You can control this limiter by adjusting the values below:

FP.performanceThrottle = true; // False completely disables the limiter system
FP.frozenFrameTime = 27; // How many ms have to pass before a frame is considered "frozen"
FP.frozenFrameLimit = 5; // How many consecutive frames should be frozen before the limiter is turned on
Loading Animations
Animation Overview
Animation Setup
Performance Considerations