Loading Animations

To load an animation you need 3 things.

1 - A frame to render the animation into.

2 - The name of the package and the style you want.

3 - A FirePro API Key, with available API calls.

We will break these down in more detail below.

Building The Frame

The frame object describes how and where you want the animation to be rendered. This is accomplished using 3 properties:


let frame = {};
frame.canvas = document.getElementById("Your_Canvas_ID"); // required
frame.width = 1920; // optional, value in px
frame.height = 1080; // optional, value in px
            

The "canvas" property is an html canvas element that the animation will render on.

The width & height set the internal size of the animation. Generally it is fine not to provide them, as the offsetWidth & offsetHeight of the canvas element will be used by default.

However if the canvas element is hidden (ie display: none), or it's current size does not reflect the size it will be when the animation begins playing, it is best to set the width/height manually.

Package Data

The package data object describes which package you want to use. Here's an example:


let packageData = {
  package: "Lens Flare Transitions",
  style: "1"
};
            

API Key

An API key is provided in your account Dashboard after creating a FirePro account.

Load The Animation

The FP.loadAnimation function returns a promise that resolves when the animation is ready to play.

It requires the 3 parameters defined above.


FP.loadAnimation(frame, packageData, apiKey).then(function(animation){
  // Animation Configuration will go here
}
            

This function can also catch any errors that occour when trying to load an animation. You can report and work around these errors as shown below:


FP.loadAnimation(frame, packageData, apiKey).then(function(animation){
  // Animation Configuration will go here

}.catch(function(loadingError){
  console.error(loadingError);
  // Fallback code here

});
            
Documenation
Overview
Installation
Loading Animations
Animation Overview
Animation Setup
Performance Considerations