stop and reverse support

MotorCortex.js

@@ -347,6 +347,8 @@
                 };
 
                 var scrollCommand = false;
+                var stopCommand = false;
+                var reverseCommand = false;
                 for(var property in properties.attributes){
                     if(property == '-.'){
                         var className = properties.attributes[property] + '';
@@ -362,6 +364,10 @@
                         continue;
                     } else if(property == 'scroll'){
                         scrollCommand = true;
+                    } else if(property == 'stop'){
+                        stopCommand = true;
+                    } else if(property == 'reverse'){
+                        reverseCommand = true;
                     }
 
                     numberOfAttrs += 1;
@@ -427,7 +433,7 @@
                     execPreActions(this.selectionFunction(properties, e));
                     callback(e, params);
                     return true;
-                }  else if(flaggedWithoutDuration){
+                }  else if(flaggedWithoutDuration && !stopCommand && !reverseCommand){
                     MC.log("error", "The duration has not been defined. The default (0.3s) will be used");
                 }
 
@@ -437,7 +443,14 @@
                     if(scrollCommand){
                         this.selectionFunction(propsToPass, e).velocity('scroll', propsToPass.options);
                     }
-                    execPreActions(this.selectionFunction(propsToPass, e)).velocity(propsToPass.attributes, propsToPass.options);
+                    if(stopCommand){
+                        execPreActions(this.selectionFunction(propsToPass, e)).velocity('stop');
+                        callback(e, params);
+                    } else if(reverseCommand){
+                        execPreActions(this.selectionFunction(propsToPass, e)).velocity('reverse', propsToPass.options);
+                    } else {
+                        execPreActions(this.selectionFunction(propsToPass, e)).velocity(propsToPass.attributes, propsToPass.options);
+                    }
                     //console.log(properties);
                 } else {
                     var selectedElements = this.selectionFunction(propsToPass, e);
@@ -463,7 +476,11 @@
                             ownAttrs[randoms[i].whichPart][randoms[i].whichKey] = randoms[i].pre + genRandom(randoms[i]['byWhichRand'][0], randoms[i]['byWhichRand'][1]) + randoms[i].units;
                         }
                         ownAttrs.options.complete = function(){CallbackHandler.finished()};
-                        execPreActions($(this)).velocity(ownAttrs.attributes, ownAttrs.options);
+                        if(reverseCommand){
+                            execPreActions($(this)).velocity('reverse', ownAttrs.options);
+                        } else {
+                            execPreActions($(this)).velocity(ownAttrs.attributes, ownAttrs.options);
+                        }
                     });
                 }
 

README.md

@@ -550,6 +550,40 @@ will be executed 4 times:
 }
 </code></pre><br/>
 
+<h3>Stop</h3>
+You can easily stop the animation of any animating element at any time. The only thing that you need to do is to create
+an event and after picking the elements you want to stop on this event just pass "stop:true" on the body of the selection.
+<br/>Let's suppose that on the event "stopAnimation" you want to stop animating all elements of class ".item". The only
+thing you need to do is to define on your mss file the corresponding event, set your selector and pass the command:
+<br/>
+<pre lang="css"><code>
+.item:stopEvent{
+    stop:true;
+}
+</code></pre><br/>
+This way all items with class ".item" will stop exactly where they are once the "stopEvent" event gets triggered.<br/>
+On a block that includes the stop command all other properties will be ignored except the "complete". That means that after
+stopping animation of any element in the page you can proceed by any other action by using the "complete" keyword, as regular.<br/>
+
+<h3>Reverse</h3>
+MotorCortex supports reverse of any animation. If you want to reverse the last animation of any element in your DOM just
+pass the "reverse:true" parameter within the body of your selection. All properties (such as delay, duration, etc) apply as usual
+on blocks that execute reverse. You can either use parametric values as usual.<br/>
+It's good to always stop the animation of any element before reversing otherwise the behaviour might be unpredictable. That's
+easy to do by creating a block that executes the stop command and on the complete block has the command reverse. Here's an
+example that demonstrate how to stop and reverse the animation of all elements of class ".item":
+<br/>
+<pre lang="css"><code>
+.item:stopAndReverse{
+    stop:true;
+    complete{
+        reverse:true;
+        duration:200;
+    }
+}
+</code></pre><br/>
+
+
 <h3>Events sequencing</h3>
 MotorCortex lets you define sequences of events (sequencial execution of events). You can define which event you want to
 trigger when an event ends by entering to the global (top) scope of any MSS file the directive:<br/>

examples/lists/index.html

@@ -8,9 +8,14 @@
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="../../libs/jquery.velocity.min.js"></script>
 
-    <script src="../../MotorCortex.min.js"></script>
+    <script src="../../MotorCortex.js"></script>
 </head>
 <body>
+    <button class="stop-button">Stop</button>
+    <button class="reverse-button">Reverse</button>
+    <button class="stop-reverse-button">Stop and Reverse</button>
+    <button class="reverse-loop">Reverse Loop</button>
+
     <div class="listContainer">
         <div class="listitem" data-delay="75">
             Lorem ipsum dolor sit amet, consectetur
@@ -61,6 +66,22 @@
 
             });
 
+            $('.stop-button').click(function(e){
+                mc.trigger('stop');
+            });
+
+            $('.reverse-button').click(function(e){
+                mc.trigger('reverse');
+            });
+
+            $('.stop-reverse-button').click(function(e){
+                mc.trigger('stop-and-reverse');
+            });
+
+            $('.reverse-loop').click(function(e){
+                mc.trigger('reverse-loop');
+            });
+
         });
 
     </script>

examples/lists/mc.mss

@@ -1,5 +1,5 @@
 .listContainer .listitem:not(triggeringElement):click{
-    duration:300;
+    duration:3000;
     delay:@domel.data-delay;
     opacity:0.5;
     scale:0.8;
@@ -13,7 +13,7 @@
 
 
 .listContainer .listitem:triggeringElement:click{
-    duration:300;
+    duration:3000;
     scale:1;
     opacity:1;
     easing:easeOutBack;
@@ -28,7 +28,7 @@
 }
 
 .listContainer .listitem:unclick{
-    duration:300;
+    duration:3000;
     scale:1;
     opacity:1;
     delay:@domel.data-delay;
@@ -38,4 +38,31 @@
     backgroundColorBlue:255;
     translateX:0px;
     boxShadowBlur:0em;
+}
+
+.listContainer .listitem:stop{
+    stop:true;
+}
+
+.listContainer .listitem:stop-and-reverse{
+    stop:true;
+}
+
+.listContainer .listitem:reverse{
+    reverse:true;
+    duration:3000;
+    delay:@domel.data-delay;
+}
+
+stop-and-reverse:callback{
+    eventName:reverse;
+}
+
+.listContainer .listitem:reverse-loop{
+    stop:true;
+    complete{
+        reverse:true;
+        duration:3000;
+        loop:100;
+    }
 }