Everything that can be added on a Clip’s timeline is an Incident and as we say in MotorCortex everything is an Incident.
The "native" Incidents provided by MotorCortex itself are the
Group and the
Combo which we have already
analysed, but how about plugins?
What kind of Incidents do plugins expose?
Plugins can expose three distinct types of Incidents:
- Custom Clips
Effects are Incidents that animate the attributes' values of selected elements of the context.
All Effects take exactly two arguments on initialisation:
Both attributes and properties are of type object.
The attributes that a plugin Effect expects vary from plugin to plugin and from Effect to Effect, depending on the action it executes/represents. Two things are common in all of them though: the animatedAttrs and the (optional) initialValues.
As mentioned, Effects animate the value of elements' attributes. The attributes that the Effect handles and changes are always included on the animatedAttrs key of its attributes. Each key's value represents the final value that the attribute will reach at the end of the Effect (target value).
As an example, by the use of the Anime Plugin, we animate the background and the fontSize of all elements of class ".my-class" to "#000000" and "45px" respectively:
The initialValues key (optionally) provides initialValues for the animatedAttrs of the Effect. If no initialValues is provided MotorCortex automatically detects the current value of the animatedAttr and keeps that as its initial value for the animation. Example:
On the provided example the
initialValues key only defines the initial value of the
background is absent. In this case,
when the animation starts, MotorCortex will use the
12px as the initial value of fontSize while it will automatically detect the
current value of the background and keep this as the initial value.
animatedAttrs and the
initialValues an Effect might expect / accept
other keys as well on its attributes. This strongly depends on the implementation of each Effect and thus developers should
always consult the plugin's documentation for details.
Unlike attributes, the properties object is standard and the same for all Effects and it supports the following keys:
- selector: the selector that defines the elements that the Effect should be applied to
- duration: the duration of the Effect in milliseconds
- delay: (optional, defaults to 0) if provided add a delay before the Effect execution. Delay is provided in milliseconds
- repeats: (optional, defaults to 1) if provided it repeats the execution of the Effect as many times as the provided integer
- hiatus: (optional, defaults to 0) if provided it adds a hiatus after the Effect execution. Hiatus is provided in milliseconds
- id: (bad practice for production, use just for debugging purposes). The id of the Effect
- name: Optionally, each Effect can have a name that the user can give for easy reference
- easing: (optional, defaults to ‘linear’) if provided it sets the easing of the Effect. The supported easings are:
These props are standard among all Effects of any plugin, they are handled directly from MotorCortex and no other key out of this list can enter the properties object.
Animations are self-contained, parametric Incidents that accept some parameters and render a full Clip on selected host elements. The concept is that the final users of Animations have absolutely no control over the context and Effects of the them. The only way users can interact with Animations is via parametrisation achieved through the attributes of the Animation.
Long story short, Animations represent fix Clips that accept parameters, render a full Clip on a selected host element and they are positioned on any other Clip's timeline, exactly as any other Incident of the MotorCortex ecosystem.
The attributes that each Animation supports is 100% custom and vary from Animation to Animation and from plugin to plugin. Plugins' documentation always provides useful guidelines on how to use and parametrise them.
The properties that Animations accept are standard. Animations' properties support the following keys:
- selector: a selector string that defines the elements that the Animation should be rendered to
- easing: (optional, defaults to ‘linear’) The execution of an Animation, positioned on another Clip's timeline, can be eased by any of the supported easings of MotorCortex
- containerParams: (optional, object) an object that accepts either 'width', 'height' or both 'width' and 'height'. As all Animations have their original dimensions, via containerParams final users have the chance to alter them by defining their own, desired dimensions
- name: Optionally, each Animation can have a name that the user can give for easy reference
- id: (bad practice for production, use just for debugging purposes). A unique id for the Animation
Let's create a Clip that uses both Effects and Animations, from various plugins
This example uses both
Animations from various plugins.
- motorcortex-anime > Anime is an Effect applied to selected elements of the Clip's context
- motorcortex-animetitles > RotatadLineReveal
- motorcortex-backgrounds > Grid