Dynamic Values

While using MotorCortex developers provide values for the attributes or properties of the participating Incidents. These values can be defined in a dynamic manner using a rich toolset provided by MotorCortex.

initParams

What is initParams

Each and every Clip can take on its props 'initParams', a key that holds an object with init parameters passed to it on instantiation. E.g.

const myClip = new HTMLClip({
  html: "<div></div>",
  css: "div: { background: black }",
  selector: "#clip",
  initParams: {
    x: "12px",
    y: "yellow",
  },
});

We can define Incidents that the value of their attrs or props directly inherit / refer to the value of the initParams of the Clip they belong to. For example:

const myIncident = new CSSEffect(
  {
    animatedAttrs: {
      left: "@initParams.x",
      color: "@initParams.y",
    },
  },
  {
    selector: "div",
    duration: 1000,
  }
);

This way we can define dynamic Clips the init params of which directly affect its Incident's characteristics.

Usage

@initParams can be used:

• On any attribute or property of any type

Syntax

The syntax is straight forward. Just use the @initParams to refer to the initParams of the Clip the Incident belongs to and keep on with the specific path you want to refer.

E.g.

• "@initParams.x"
• "@initParams.x.y"
• etc

Pattern

What is pattern

As the name implies, instead of providing an explicit value to any of the attrs or props of an Incident the developer can define a pattern to be applied. The pattern defines an ordered list of values to be applied / used on each of the elements of the selector, in the provided order. The way to define a pattern is simply by using the "@pattern" keyword. For example: "@pattern(20px, 30px, 40px)".

Parameters

The @pattern takes an infinite number of values that define the ordered list of values to be applied to the elements of the selector, sequentially and repeatedly.

Usage

Pattern can be applied:

• On any attribute or property of type “measurement” or “amount”, "string" and "color"
• On duration, delay, hiatus and repeats properties
• On any Incident (either Effect or Animation)
• But not on you own Clips when used as Incident (CASI / you create a Clip, and you place it on the timeline of another)

Syntax

The syntax is straight forward. Instead of providing a measurement or an amount, you can pass a pattern expression, which is a string of the following format:

@pattern(val1, val2, val3, ...)

Examples

• “@pattern(100px, 200px)”,
• “@pattern(100, 200, 300)”

Stagger

What is stagger

Stagger is a way of dynamically defining the value of an Incident’s paramater, so that its value incrementally and sequentially changes from element to element. For example if we set the duration of an Incident equal to “@stagger(1000, 2000)”, that will mean that when this Incident gets into a Clip, the duration of it will vary from element to element, starting from 1000 (first element) and incremendaly reaching 2000 (last element).

Parameters

Except the obvious, start and end value of a stagger there are four more parameters supported. The following table lists all supported parameters of a stagger expression:

name	type	comments
start value	Number / measurement	Defines the start value of the parameter
end value	Number / measurement	Defines the end value of the parameter
start position	Number from 0 to 1	There are cases we want to start our stagger not from the first element but from some point else on the element set. The start position is a number from 0 to 1 and defines the position of the stagger within this space. For example if we have a set of 3 elements and we set our start position to 0.5, our stagger will start from the 2nd element and not from the 1st
easing	Any of the supported easings	easing defines the way the start value gradually increases so it reaches the end value
mode	Either linear or omni	linear mode means that starting from our first element (that it might be any element in our set) the value of the parameter will increase with direction left to right, lineary, until it reaches the final element and the end value. In case we want our distribution to be omni directional we can set this parameter to omni
reverse	Boolean, defaults to false	Reverses the stagger values

Usage

Stagger can be applied:

• On any attribute or property of type “measurement” or “amount”
• On duration, delay, hiatus and repeats properties
• On any Incident (either Effect or Animation)
• But not on you own Clips when used as Incident (CASI / you create a Clip, and you place it on the timeline of another)

Syntax

The syntax is straight forward. Instead of providing a measurement or an amount, you can pass a stagger expression, which is a string of the following format:

@stagger(startValue, endValue, startPosition(optional, default=0), easing(optional, default=”linear”, mode(optional, default=”linear”), reverse(optional, default=false)).

Examples

• “@stagger(100px, 200px)”
• “@stagger(100px, 200px, 0.5)”
• “@stagger(100px, 200px, 0.3, easeOutCubic)”
• “@stagger(100px, 200px, 0.3, easeOutCubic, omni)”
• “@stagger(100px, 200px, 0.3, easeOutCubic, omni, true)”

Expression

What is expression

Expressions is an alternative way of defining dynamic values either for your properties (duration, delay, etc) or your attributes’ values. An expression can define the final value that a property, or an attribute should have in a mathematical expression that can include the index number of the element (index), and the total number of all elements of the selector (total). For each element belonging to the selector whatever is within the @expression(<here>) will run and the calculated value will be used as the value of the specific element.

For example @expression(index*3 + 2) for 3 elements will provide the following values:

• 0*3 + 2 = 2
• 1*3 + 2 = 5
• 2*3 + 2 = 8

Notice

Avoid using loops within the @expression() method. Beaware that these loops will run for each and every element of the selector.

Usage

expressions can be applied:

• On any attribute or property of type “measurement” or “amount”, "string" and "color"
• On duration, delay, hiatus and repeats properties
• On any Incident (either Effect or Animation)
• But not on you own Clips when used as Incident (CASI / you create a Clip, and you place it on the timeline of another)

Syntax

The syntax is straight forward. Instead of providing a measurement or an amount, you can pass a mathematical expression, which is a string of the following format: @expression(<mathematical expression>)<unit>

Examples

• “@expression(100*index + 200)px”, where index is the index number of the element, starting from 0
• “@expression(400 + index*100/total)”, where index is the index number of the element and total the total number of all elements
• “@expression(random(100,300)*index)”
• "@expression(initParams.x * 3)" where initParams refers to the initParams passed to the Clip that the Incident belongs to

Supported functions

The @expression functionality is built upon expr-eval library. All supported functions of the library are also supported by @expression in MotorCortex. Some examples are:

• abs
• ceil
• floor
• sqrt
• cos, sin, etc
• random
• min, max
• and more... Full list and definitions can be found here

Attribute value

On attrs of any measurement or amount type attribute (not supported on props) @attribute expression can be used. Using the @attribute expression we can tell MotorCortex to get the value of the specific attribute out of an attribute of each element. So for example we can use the following syntax: @attribute(data-value)

This way, MotorCortex will read the data-value of each element and it will dynamically use it as the value of the specific attribute. lue on your Incidents so that your Clip can change dynamically by just changing its initParams