Groups provide a convenient way to group Incidents together and manage them altogether. Just like the Clip, the Group also provides a timeline where Incidents can be positioned. Unlike Clips, Groups do not own context, they are just used to group Incidents together.


Let’s create a Group and put it on our Clip’s timeline:

// that's how we create a new Group
const myGroup = new MotorCortex.Group();
// we can add as many Incidents as we want anywhere on our Group's timeline
myGroup.addIncident(incident1, 0);
myGroup.addIncident(incident2, 1000);
// On the same manner we can add our Group on any other Group's or Clip's timeline
myClip.addIncident(myGroup, 1000);



The Group accepts the following keys on its props:

selectorstringan optional selector string that will be used & applied to all of the child Incidents of the Group as the parent selector of them (we’ll see that in action later)
namestring(optional) A name for your Group
id (just for development purposes)string(bad practice for production, use just for debugging purposes). The id of the Group


The Group exposes a number of methods which allows Incidents' management. The most important are:

  • addIncident, which takes two arguments the Incident to add and the millisecond to position it on the Group's timeline
  • moveIncident which takes two arguments, the Incident to move and the new millisecond to position it
  • removeIncident which takes just one argument, the Incident to remove from the Group's timeline

Notice that all three of the mentioned methods might return false, providing back a list of potential errors.

Also, notice that any Clip is a Group itself so all of the provided by Group methods are also available on Clips.