Animation setup

This page covers a specific property of the animation object called "setup".


FP.loadAnimation(frame, packageData, apiKey).then(function(animation){
  console.log(animation.setup);
}
            

General Information

The "setup" property exposes specific inputs you can use to change an animations look. Any changes you make to this object will update the animation in real time.

The exact options available to you will differ from animation to animation, however all setup objects follow a predictable pattern.

Identifing Inputs

There are 2 ways to figure out what inputs are available for the animation you are using.

First you can use the editor on our website. It automatically generates a full setup object for the animation. For example, to find which options the Lens Flare Transitions pack has, you can load it up in the editor.

Once in the editor clicking the "Add To Your Website" button will generate the following code containing the setup object.


// -- Setup The Controls
let controls = setup.controls;
controls.colorCorrection = {
  bloom: 0,
  brightness: 0,
  contrast: 0,
  hue: 0,
  saturation: 0,
  blur: { type: "Box",  value: 0 }
};

// -- Setup Image 1
let image1 = setup.image1;
image1.src = document.getElementById("Your_Image_ID");

// -- Setup Image 2
let image2 = setup.image2;
image2.src = document.getElementById("Your_Image_ID");
            

Second, you can load the animation via our API and console.log the "setup" object to obtain a similar result.


let packageData = { package: "Lens Flare Transitions", style: "1" }
FP.loadAnimation(frame, packageData, apiKey).then(function(animation){
  console.log(animation.setup);
}
            

Types Of Inputs

There are 3 main types of inputs:

1 - Controls

2 - Image

3 - Text

Controls


console.log(animation.setup.controls);
            

The controls input is the only type that is animation specific, as it allows you to change things about the animation itself.

For example the Lens Flare Transitions pack exposes a color correction effect for the lens flares.


// -- Setup The Controls
let controls = setup.controls;
controls.colorCorrection = {
  bloom: 0,
  brightness: 0,
  contrast: 0,
  hue: 0,
  saturation: 0,
  blur: { type: "Box",  value: 0 }
};
            

Image

An image input starts with the word "image" and is followed by an index number. The index number is used as some animations allow for multiple images.


// -- Complete Image Object
let image1 = setup.image1;
image1.src = document.getElementById("Your_Image_ID");
image1.backgroundColor = [0, 0, 0, 0];
image1.effects = {
  bloom: 0,
  brightness: 0,
  contrast: 0,
  hue: 0,
  saturation: 0,
  blur: { type: "Box",  value: 0 }
};
            

The image input is actually very flexable in terms of what it can do. The source property (src) can use any of the following:

- HTML Image

- HTML Video

- A Canvas Element (this includes FirePro canvas Elements, the width/height should be the same as your target canvas)

If you set the source to "null", or if your souce has transparency built into it, you can also set a background color. The background color is a javascript array with 4 indexes represting the RGBA components of a color.

The effects are standard color correction & blur effects you can apply to the image before it is inserted in the animation.

Text

An text input starts with the word "text" and is followed by an index number. The index number is used as some animations allow for multiple text inputs.


// -- Complete Text Object
let text1 = setup.text1;
text1.container.style.color = "rgba(0, 0, 0, 1)";
text1.container.style.fontFamily = "Pacifico";
text1.container.style.textShadow = "0 0 10px rgba(0, 0, 0, 1)";
text1.container.style.setProperty("--FP_stroke", "13.4 rgba(0, 0, 0, 1)");
text1.renderNode1.innerHTML = "IMAGE TEXT";
            

The text object is a HTML div element that was automatically generated when you loaded an animation that uses text.

The div element has a class of "FP_textContainer", and has div's inside it with a class of "FP_renderNode";


<div class="FP_textContainer">
   <div class="FP_renderNode">Text To Render</div>
   <div class="FP_renderNode">Text To Render</div>
</div>

Only text inside the "FP_renderNode" div's will actually be rendered in the animation. You can style/position these divs using normal css properties, however css transforms/transitions will not work.

In addition to using normal css there are new FirePro specific properties you can use as well.


<div class="FP_renderNode" style="--FP_stroke: 1px blue; --FP_verticalAlign: 50%; --FP_fontSize: 10cw;">Text To Render</div>

The "--FP_stroke" property takes 2 parameters. The first is a number which only supports pixel units that defines the size of the text stroke. The second is what color the stroke should be.

The "--FP_verticalAlign" property is a positioning property that will vertically align the div by a percentage of its container. This alignment does not change the divs box model, meaning everything else stays in place except the text with the div.

The "--FP_fontSize" property is a special way to set the font size relative to its container. This works the same way as the "vw" unit in css, however instead of refrencing the viewport it will refrence the size of the "FP_textContainer" div.

Documenation
Overview
Installation
Loading Animations
Animation Overview
Animation Setup
Performance Considerations