Main Concepts


Once upon a time, in Forest X two birds were sitting on a tree.

The birds were singing.

Suddenly a dog started barking and running towards the birds.

The birds stopped singing and flew away until they were not visible any more.

If we want to put this story on a timeline we could end up with something like this:

MotorCortex Timeline

On this story’s timeline there are three Incidents with very specific position and duration:

  • Birds singing (from millisecond 0 to 2000)
  • Dog barking and running (from ms 2000 to 3200)
  • Birds flying away (ms 2800 to 4000)

Everything happens in Forest X, where the two birds live. The Forest X along with the birds, the tree and the dog are our scene, the material part or, as we call it in MotorCortex in one word, the “context”. In the browser world, the context mainly consists of HTML and CSS. In MotorCortex, the context always belongs on a Clip, a class that accepts the HTML and CSS as initialisation params and renders itself on a provided host.

Incidents can be grouped together by the use of Groups. For example, the same (stupid, birds singing) scenario could alternatively be described in the following way:

MotorCortex Timeline with Group 1

Or even:

MotorCortex Timeline with Group 2

MotorCortex implements these concepts using Object Oriented Programming (es6), providing a modular framework that makes it easy to combine an unlimited number of easy-to-create and easy-to-use plugins, under a single logic and syntax. Almost any animation library (such as animejs, gsap, threejs, flubber etc) can be turned to a MotorCortex plugin by the use of MotorCortex plugin SDK.

What’s in the box?

Whats in the box?

MotorCortex exposes the following classes: