Added sequencing

Author: daniel-lundin

docs/css/custom.css

@@ -179,6 +179,12 @@ footer {
   transform: rotateY(-180deg);
 }
 
+.sequence-example {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background: brown;
+}
 
 .multi-container {
   position: relative;

docs/docs.js

@@ -137,6 +137,27 @@ $(function() {
     });
   });
 
+  // Sequence example
+  $('#sequence-element-example').on('click', function() {
+    console.log('click');
+    var elementOne = document.getElementById('sequence-one');
+    var elementTwo = document.getElementById('sequence-two');
+    snabbt.sequence([
+        [elementTwo, {
+          position: [100, 0, 0],
+        }],
+        [elementOne, {
+          position: [100, 0, 0],
+        }],
+        [elementOne, {
+          position: [0, 0, 0],
+        }],
+        [elementTwo, {
+          position: [0, 0, 0],
+        }],
+      ]
+    );
+  });
   // Value feed example
   $('#value-feed-example').on('click', function() {
     $('#value-feed-example').snabbt({

docs/index.html

@@ -68,7 +68,7 @@ <h3><i class="fa fa-rocket"></i>Fast</h3>
           </div>
           <div class="four columns">
             <h3><i class="fa fa-paper-plane"></i>Light</h3>
-            <p> ~4kb minified and gzipped</p>
+            <p> ~5kb minified and gzipped</p>
           </div>
           <div class="four columns">
             <h3><i class="fa fa-user"></i>Simple</h3>
@@ -258,6 +258,29 @@ <h3>Life cycle events</h3>
         <h2>Advanced concepts</h2>
         <p>This section describes some of the more advanced usages.</p>
 
+        <h3>Sequence</h3>
+        <p>Chaining is convenient when animating a single element or group of elements in multiple steps. However, if you want to trigger animations on a different set of element once one animation is completed you often end up with a lot of callbacks. This is where sequencing comes into play. <em>snabbt.sequence</em> is a function call that allows you to specify an array of animations that should run in sequence.</p>
+        <pre><code class="javascript">snabbt.sequence([
+    [elementTwo, {
+      position: [100, 0, 0],
+    }],
+    [elementOne, {
+      position: [100, 0, 0],
+    }],
+    [elementOne, {
+      position: [0, 0, 0],
+    }],
+    [elementTwo, {
+      position: [0, 0, 0],
+    }],
+  ]
+);</code></pre>
+        <button id="sequence-element-example" class="button-primary extra-top-margin">Run example</button>
+        <div>
+          <div id="sequence-one" class="sequence-example"></div>
+          <div id="sequence-two" class="sequence-example"></div>
+        </div>
+
         <h3>Value feeding</h3>
         <p>The animation object is very simple to work with but has it limitations. Sometimes you want to do the transforms in another order. This is where value feeding comes handy. The <em>valueFeeder</em> parameter expects a function that takes two parameters, one which will progress from 0 to 1 and an identity matrix that you can modify. The function will be called every frame and should return a matrix(see <a href="#matrix">Matrix API</a>) representing the current transform.</p>
         <pre><code class="javascript">snabbt(element, {

docs/snabbt.min.js

@@ -530,6 +530,8 @@ module.exports = Engine;
 'use strict';
 /* global window */
 
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
 var Engine = require('./engine.js');
 var preprocessOptions = require('./properties.js').preprocessOptions;
 var utils = require('./utils.js');
@@ -583,27 +585,42 @@ function snabbt(elements, arg2, arg3) {
   return aggregateChainer;
 }
 
-//if (typeof window !== 'undefined') {
-//  window.snabbt = function(element, arg2, arg3) {
-//    return snabbt(element, arg2, arg3);
-//  };
-//  window.snabbt.createMatrix = createMatrix;
-//  window.snabbt.setElementTransform = updateElementTransform;
-//
-//  if (window.jQuery) {
-//    (function ($) {
-//      $.fn.snabbt = function(arg1, arg2) {
-//        return snabbt(this.get(), arg1, arg2);
-//      };
-//    })(window.jQuery);
-//  }
-//} else {
-
 module.exports = function (element, arg2, arg3) {
   return snabbt(element, arg2, arg3);
 };
 module.exports.createMatrix = createMatrix;
 module.exports.setElementTransform = updateElementTransform;
+module.exports.sequence = function (queue) {
+  var i = 0;
+
+  var next = function next() {
+    ++i;
+    if (i > queue.length - 1) return;
+
+    var _queue$i = _slicedToArray(queue[i], 2);
+
+    var element = _queue$i[0];
+    var options = _queue$i[1];
+
+    var previousAllDone = options.allDone;
+    options.allDone = previousAllDone ? function () {
+      previousAllDone();next();
+    } : next;
+    snabbt(element, options);
+  };
+
+  var _queue$0 = _slicedToArray(queue[0], 2);
+
+  var element = _queue$0[0];
+  var options = _queue$0[1];
+
+  var previousAllDone = options.allDone;
+  options.allDone = previousAllDone ? function () {
+    previousAllDone();next();
+  } : next;
+
+  snabbt(element, options);
+};
 
 if (typeof window !== 'undefined' && window.jQuery) {
   (function ($) {
@@ -613,8 +630,6 @@ if (typeof window !== 'undefined' && window.jQuery) {
   })(window.jQuery);
 }
 
-//}
-
 Engine.init();
 
 },{"./engine.js":3,"./matrix.js":5,"./properties.js":6,"./utils.js":9}],5:[function(require,module,exports){