Concert.js

How to Set and Use Defaults

The Concert.Sequence object provides a method called setDefaults(), which allows setting a sequence's default applicator, calculator, easing function, and unit. Those defaults are applied to all subsequently added transformations that do not explicitly specify those things in their own definitions.

setDefaults takes a single argument, an object which looks like this:

{
  applicator: VALUE,
  calculator: VALUE,
  easing: VALUE,
  unit: VALUE
}

Any or all of the above properties can be specified, and only those specified are set. (That is, if the default calculator is already Concert.Calculators.Rotational, and setDefaults is called again to change the default easing function but a new default calculator is not specified, then the sequence's default calculator will remain set to Concert.Calculators.Rotational.)

Important note: Transformations are given their applicator, calculator, easing function, and unit at the time they are added to the sequence. Setting new defaults therefore will only affect transformations added to the sequence after the new defaults are set. The setDefaults() method never changes transformations already added.

Below see an example of setting defaults to avoid code duplication:

const WideningDiv1 = document.getElementById("WideningDiv1"),
  WideningDiv2 = document.getElementById("WideningDiv2"),
  WideningDiv3 = document.getElementById("WideningDiv3");

let sequence = new Concert.Sequence();

sequence.setDefaults(
  {
    applicator: Concert.Applicators.Style,
    calculator: Concert.Calculators.Linear,
    easing: Concert.EasingFunctions.QuadInOut,
    unit: "px",
  });

let animations =
  [
    {
      target: WideningDiv1, feature: "width",
      keyframes: { times: [0, 1500], values: [120, 480] }
    },

    {
      target: WideningDiv2, feature: "width",
      keyframes: { times: [0, 1500], values: [120, 480] }
    },

    {
      target: WideningDiv3, feature: "width",
      unit: "%",
      keyframes: { times: [0, 1500], values: [25, 100] }
    }
  ];

sequence.addTransformations(animations);

document.getElementById("GoButton").onclick =
  function () { sequence.begin(); };

The above defines three transformations. But because the call to setDefaults() has defined default values for applicator, calculator, easing function, and unit, none of those three things need to be declared in the transformation definitions themselves if those default values are what is needed. Note that the third transformation above (which specifies a "%" unit instead of using "px" like the others) demonstrates how it is perfectly possible to use values other than the defaults if you want.

Pre-defined Defaults

We have been explicitly declaring values for most of these parameters in this tutorial sequence so far, but that was just to show how things work. There are initial default values which you can rely upon as well, specifying only those parameters which differ from those defaults.

Here is what the defaults are set to automatically in a newly created Concert.Sequence object:

applicator: Concert.Applicators.Property
calculator: Concert.Calculators.Linear
easing: Concert.EasingFunctions.ConstantRate
unit: null

Want more details?

Reference documentation links for items covered in this step of the tutorial:

• Concert.Sequence.setDefaults() method