/* and proceed normally */

var mc = new MotorCortex(); mc.loadMSS('./path/to/my_mss.mss', function(){ // here you are sure the MotorCortex loaded and rendered the MSS files }); MotorCortex depends on jQuery and velocity, so make sure you include both on your package.json file or install them manually. The corresponding npm packages are:

.section2:myEvent{ duration:300; top:-=300px; } This code indicates that when the event with the name "myEvent" fires all elements of class "section" will animate top by 300 pixels in 400ms and all elements of class "section2" by 300 pixels in 300ms. Triggering an event is easy. After loading the library and the mss files we call the MotorCortex's "trigger" method. At the specific example this is as easy as this:

.section:myEvent{ duration:@globals.myGlobalDuration; top:@globals.myGlobalTop; } As shown on the example, in order to define a global variable you just define its value using the "@" character as the first of the definition string. You can use any of the defined global variables within the MSS file by using the expression: @globals. followed by the global variable name (this time without the precedent "@".

.section img:myEvent{ duration:300; rotateZ:90deg; } With the nested elements capability provided by MotorCortex you can just write:

As you can see we've not included the "duration" option on the img scope. Nested elements automatically inherit the animation characteristics from their parents. Though you can always change / overwrite these options if you want. Using the following syntax the img elements will animate in 400ms and not in 300: