The MonoIncident

When to use it

When we want to develop an Incident that accepts a selector and a number of attributes to animate then we work with MonoIncidents.

class MyIncident extends MonoIncident {
...
}

The cases that developers use MonoIncidents on their plugins are mostly when they want to bring in to MotorCortex functionality from third party libraries (such as anime or gsap).

The way to do it is easy:

  • Create an Incident extending MotorCortex’s MonoIncident (MotorCortex.API.MonoIncident)
  • onGetContext of MonoIncident setup the third party library’s animation (but without executing it)
  • onProgress of your MonoIncident progress your created third party animation accordingly

Implementation

When extending MonoIncident you should implement the following methods:

  • onGetContext
  • onProgress
  • getScratchValue
  • lastWish

And you have access to the following properties:

  • this.element: the element that the Incident will be applied to
  • this.attributeKey: the attribute name that will be animated
  • this.targetValue: the value of the animated attribute to be animated
  • this.selector: a selector string that only returns this.element
  • this.initialValue: the initial value of the animated attribute

Easings

When you implement your onProgress method you will overwrite the MonoIncident’s method which takes two arguments:

  • fraction (from 0 to 1, which provides the percentage of progress made on the Incident)
  • millisecond (from 0 to duration) which provides the milliseconds progressed on the Incident

Both arguments are already processed by the easing provided by the user on Incident’s initialisation so you can write your code as you were dealing with a linear easing. The rest is up to MotorCortex to handle.