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.
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
- But not on Clip as Incident
Syntax
The syntax is straight forward. Instead of providing a measurement or an amout, 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 and the total number of all elements of a selector.
Usage
expressions can be applied:
- On any attribute or property of type “measurement” or “amount”
- On duration, delay, hiatus and repeats properties
- On any Incident
- But not on Clip as Incident
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
initParamsrefers to the initParams passed to the Clip that the Incident belongs to
Supported functions
The @expression functionality is built upon mathjs library. All supported functions of the library are also supported by @expression in MotorCortex. Some examples are:
- abs
- ceil
- cube
- floor
- sqrt
- cos, sin, etc
- random
- randomInt 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.
initParams
When defining a new Clip, optionally on its properties, the user can pass initParams on the initParams key of it.
Any Incident can use on its attrs and props values the value of any of the initParams of the Clip it belongs to.
Examples
- "@initParams.x" will take the value of
initParams.xof the Clip - "@initParams.a.b" etc.
When to use
When creating Clips that you want their appearance or behaviour to change according to its initParams use the @initParams
dynamic value on your Incidents so that your Clip can change dynamically by just changing its initParams