Create composite behaviours

By the use of MonoIncidents mainly we bring in functionality from 3rd party libraries. But what if we want to export Incidents that will execute a series of Incidents of the same or even of different plugins, composing a distinct composite action? In such a case we can use the Group Class.

const MotorCortex = require("@kissmybutton/motorcortex");
const AnimePlugin = require("@kissmybutton/motorcortex-anime");
const Anime = MotorCortex.loadPlugin(AnimePlugin);
class fancyMove extends MotorCortex.API.Group {
buildTree(){
const moveLeft = new Anime.Anime(
{
animatedAttrs: {
left: '200px'
}
}, {
duration: 250
}
);
const changeBackground = new Anime.Anime(
{
animatedAttrs: {
background: '#FFF'
}
}, {
duration: 250
}
);
const moveRight = new Anime.Anime(
{
animatedAttrs: {
left: '0px'
}
}, {
duration: 250
}
);
const resetBackground = new Anime.Anime(
{
animatedAttrs: {
background: '#000'
}
}, {
duration: this.props.duration * 0.3
}
);
this.addIncident(moveLeft, 0);
this.addIncident(changeBackground, 0);
this.addIncident(moreRight, 300);
this.addIncident(resetBackground, 300);
}
}

This Incident will create all MonoIncidents that it needs in order to create its composite behaviour on the buildTree method of it.

Notice that none of the Incidents created on the buildTree method took a selector. This we've done it on purpose as we want the Incidents to inherit the selector from their (Group) parent.

Finally, notice that on the "resetBackground" Anime we set its duration as a fraction of our Group's props.duration.