Animation Overview

This page covers the basic properties of a fully loaded animation.

FP.loadAnimation(frame, packageData, apiKey).then(function(animation){

Animation Data


Stores all the internal data needed to render the animation. It is gernally only used for diagnostics.

Control Functions

These allow you to change the play state of an animation.

animation.destroy(); // Destory the animation and clean up all memory; // Play the animation
animation.playBackSpeed; // The playback speed of the animation (1 is default, 2 is twice as fast)
animation.pause(); // Pause the animation, but still process setup changes
animation.hardPause(); // Pause the animation, and ignore setup changes

Frame Information

animation.fps; // The animations frame rate
animation.frameNumber; // The frame number the animation is currently on
animation.numberOfFrames; // How many frames an animation has (This can change based off your setup params)
animation.frame; // A refrence to the canvas element being used



This is a html div element created when the animation was loaded. It is used to provide a native event system that the animation can interact with. Adding and removing events can be done like this:"frameUpdate", callBack);"frameUpdate", callBack);

These are the events available for you to listen to

"frameUpdate"; // Fires every time a new frame of the animation is rendered
"loop"; // Fires after an animation has rendered its last frame
"halfway"; // Fires at a predetermined part of the animation (not all animations fire this event);



This property exposes all the controls and inputs of an animation. It is used to customize how the animation looks, and changes made to it are rendered in real time. Click here to see a detailed breakdown.

Loading Animations
Animation Overview
Animation Setup
Performance Considerations