Include built motion UI

For #29

libraries/motion-ui/.gitignore

+.DS_Store
+.sass-cache
+node_modules
+npm-debug.log
+bower_components
+_build

libraries/motion-ui/.npmignore

+.DS_Store
+_build
+node_modules
+bower_components
+docs/src
+test

libraries/motion-ui/.scss-lint.yml

+linters:
+
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BorderZero:
+    enabled: true
+
+  ColorKeyword:
+    enabled: true
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: false
+
+  ElsePlacement:
+    enabled: true
+    style: same_line
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short
+
+  HexNotation:
+    enabled: true
+    style: lowercase
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    character: space
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: false
+
+  NameFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    allow_leading_underscore: true
+
+  NestingDepth:
+    enabled: true
+    max_depth: 3
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$'
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: false
+
+  UrlQuotes:
+    enabled: true
+
+  VendorPrefixes:
+    enabled: true
+    identifier_list: base
+    include: []
+    exclude: []
+
+  ZeroUnit:
+    enabled: true

libraries/motion-ui/.versions

+babel-compiler@5.8.24_1
+babel-runtime@0.1.4
+base64@1.0.4
+caching-compiler@1.0.0
+check@1.1.0
+ecmascript@0.1.6
+ecmascript-runtime@0.2.6
+ejson@1.0.7
+fourseven:scss@3.4.1
+jquery@1.11.4
+meteor@1.1.10
+promise@0.5.1
+random@1.0.5
+underscore@1.0.4
+zurb:motion-ui@1.2.2

libraries/motion-ui/LICENSE

+Copyright (c) 2013-2015 ZURB, inc.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file

libraries/motion-ui/README.md

+# Motion UI
+
+A Sass library for creating CSS transitions and animations from your friends at [ZURB](http://zurb.com). Originally integrated into [Foundation for Apps](http://foundation.zurb.com/apps), the code is now a standalone library, soon to be used by [Foundation for Sites](http://foundation.zurb.com/sites) and Foundation for Apps.
+
+## Installation
+
+- On npm: `npm install motion-ui`
+- On Bower: `bower install motion-ui`
+
+## Demos
+
+[View live demos on the ZURB Playground.](http://zurb.com/playground/motion-ui)
+
+## Documentation
+
+[View the documentation here.](docs)
+
+## Develop Locally
+
+```
+git clone https://github.com/zurb/motion-ui
+cd motion-ui
+npm install
+```
+
+- Run `npm start` to compile test Sass/JS files, and to build the documentation.
+  - **To make changes to the documentation, edit the files under `docs/src`.
+- Run `npm test` to run the unit tests.
+- Run `npm start dist` to compile distribution files.

libraries/motion-ui/bower.json

+{
+  "name": "motion-ui",
+  "version": "1.2.2",
+  "authors": [
+    "ZURB <foundation@zurb.com>"
+  ],
+  "description": "Sass library for creating transitions and animations.",
+  "main": [
+    "dist/motion-ui.css",
+    "dist/motion-ui.js"
+  ],
+  "keywords": [
+    "Sass",
+    "motion"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "_build",
+    "node_modules",
+    "bower_components",
+    "docs/src",
+    "test"
+  ],
+  "dependencies": {
+    "jquery": "~2.2.0"
+  }
+}

libraries/motion-ui/composer.json

+{
+  "name": "zurb/motion-ui",
+  "description": "Sass library for creating transitions and animations.",
+  "version": "1.2.2",
+  "keywords": [
+    "css",
+    "sass",
+    "motion",
+    "animation"
+  ],
+  "homepage": "http://foundation.zurb.com",
+  "authors": [
+    {
+      "name": "ZURB, Inc.",
+      "homepage": "http://zurb.com",
+      "email": "foundation@zurb.com"
+    }
+  ],
+  "support": {
+    "email": "foundation@zurb.com",
+    "issues": "https://github.com/zurb/motion-ui/issues",
+    "forum": "http://foundation.zurb.com/forum"
+  },
+  "license": "MIT"
+}

libraries/motion-ui/dist/motion-ui.js

+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('jquery'));
+  } else {
+    root.MotionUI = factory(root.jQuery);
+  }
+}(this, function($) {
+'use strict';
+
+// Polyfill for requestAnimationFrame
+(function() {
+  if (!Date.now)
+    Date.now = function() { return new Date().getTime(); };
+
+  var vendors = ['webkit', 'moz'];
+  for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+      var vp = vendors[i];
+      window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
+      window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
+                                 || window[vp+'CancelRequestAnimationFrame']);
+  }
+  if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)
+    || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+    var lastTime = 0;
+    window.requestAnimationFrame = function(callback) {
+        var now = Date.now();
+        var nextTime = Math.max(lastTime + 16, now);
+        return setTimeout(function() { callback(lastTime = nextTime); },
+                          nextTime - now);
+    };
+    window.cancelAnimationFrame = clearTimeout;
+  }
+})();
+
+var initClasses   = ['mui-enter', 'mui-leave'];
+var activeClasses = ['mui-enter-active', 'mui-leave-active'];
+
+// Find the right "transitionend" event for this browser
+var endEvent = (function() {
+  var transitions = {
+    'transition': 'transitionend',
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'transitionend',
+    'OTransition': 'otransitionend'
+  }
+  var elem = window.document.createElement('div');
+
+  for (var t in transitions) {
+    if (typeof elem.style[t] !== 'undefined') {
+      return transitions[t];
+    }
+  }
+
+  return null;
+})();
+
+function animate(isIn, element, animation, cb) {
+  element = $(element).eq(0);
+
+  if (!element.length) return;
+
+  if (endEvent === null) {
+    isIn ? element.show() : element.hide();
+    cb();
+    return;
+  }
+
+  var initClass = isIn ? initClasses[0] : initClasses[1];
+  var activeClass = isIn ? activeClasses[0] : activeClasses[1];
+
+  // Set up the animation
+  reset();
+  element.addClass(animation);
+  element.css('transition', 'none');
+  requestAnimationFrame(function() {
+    element.addClass(initClass);
+    if (isIn) element.show();
+  });
+
+  // Start the animation
+  requestAnimationFrame(function() {
+    element[0].offsetWidth;
+    element.css('transition', '');
+    element.addClass(activeClass);
+  });
+
+  // Clean up the animation when it finishes
+  element.one('transitionend', finish);
+
+  // Hides the element (for out animations), resets the element, and runs a callback
+  function finish() {
+    if (!isIn) element.hide();
+    reset();
+    if (cb) cb.apply(element);
+  }
+
+  // Resets transitions and removes motion-specific classes
+  function reset() {
+    element[0].style.transitionDuration = 0;
+    element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
+  }
+}
+
+var MotionUI = {
+  animateIn: function(element, animation, cb) {
+    animate(true, element, animation, cb);
+  },
+
+  animateOut: function(element, animation, cb) {
+    animate(false, element, animation, cb);
+  }
+}
+
+return MotionUI;
+}));

libraries/motion-ui/dist/motion-ui.min.css

+.slide-in-down.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-left.mui-enter,.slide-in-up.mui-enter{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform;-webkit-backface-visibility:hidden}.slide-in-down.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-left.mui-enter{-webkit-transform:translateX(-100%);transform:translateX(-100%);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;backface-visibility:hidden}.slide-in-left.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-in-up.mui-enter{-webkit-transform:translateY(100%);transform:translateY(100%);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;backface-visibility:hidden}.slide-in-right.mui-enter,.slide-out-down.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform;-webkit-backface-visibility:hidden}.slide-in-up.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-right.mui-enter{-webkit-transform:translateX(100%);transform:translateX(100%);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;backface-visibility:hidden}.slide-in-right.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-out-down.mui-leave{-webkit-transform:translateY(0);transform:translateY(0);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;backface-visibility:hidden}.slide-out-right.mui-leave,.slide-out-up.mui-leave{transition-property:opacity,-webkit-transform;-webkit-backface-visibility:hidden;transition-duration:.5s;transition-timing-function:linear}.slide-out-down.mui-leave.mui-leave-active{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-out-right.mui-leave{-webkit-transform:translateX(0);transform:translateX(0);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;backface-visibility:hidden}.slide-out-right.mui-leave.mui-leave-active{-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-out-up.mui-leave{-webkit-transform:translateY(0);transform:translateY(0);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;backface-visibility:hidden}.slide-out-up.mui-leave.mui-leave-active{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-out-left.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:translateX(0);transform:translateX(0);transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fade-in.mui-enter,.fade-out.mui-leave{transition-property:opacity;transition-duration:.5s;transition-timing-function:linear}.slide-out-left.mui-leave.mui-leave-active{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.fade-in.mui-enter{opacity:0}.fade-in.mui-enter.mui-enter-active,.fade-out.mui-leave{opacity:1}.fade-out.mui-leave.mui-leave-active{opacity:0}.hinge-in-from-top.mui-enter{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:top;transform-origin:top;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.hinge-in-from-bottom.mui-enter,.hinge-in-from-right.mui-enter{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.hinge-in-from-top.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-right.mui-enter{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:right;transform-origin:right;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.hinge-in-from-right.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-bottom.mui-enter{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.hinge-in-from-left.mui-enter,.hinge-in-from-middle-x.mui-enter{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.hinge-in-from-bottom.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-left.mui-enter{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);-webkit-transform-origin:left;transform-origin:left;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.hinge-in-from-left.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-middle-x.mui-enter{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.hinge-in-from-middle-y.mui-enter,.hinge-out-from-top.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.hinge-in-from-middle-x.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-middle-y.mui-enter{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.hinge-in-from-middle-y.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-out-from-top.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:top;transform-origin:top;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.hinge-out-from-bottom.mui-leave,.hinge-out-from-right.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.hinge-out-from-top.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-right.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:right;transform-origin:right;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.hinge-out-from-right.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.hinge-out-from-bottom.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.hinge-out-from-left.mui-leave,.hinge-out-from-middle-x.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.hinge-out-from-bottom.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);opacity:0}.hinge-out-from-left.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:left;transform-origin:left;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.hinge-out-from-left.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}.hinge-out-from-middle-x.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:center;transform-origin:center;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.hinge-out-from-middle-y.mui-leave,.scale-in-up.mui-enter{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.hinge-out-from-middle-x.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-middle-y.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:center;transform-origin:center;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.hinge-out-from-middle-y.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.scale-in-up.mui-enter{-webkit-transform:scale(.5);transform:scale(.5);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.scale-in-down.mui-enter,.scale-out-up.mui-leave{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.scale-in-up.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-in-down.mui-enter{-webkit-transform:scale(1.5);transform:scale(1.5);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.scale-in-down.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-out-up.mui-leave{-webkit-transform:scale(1);transform:scale(1);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.scale-out-down.mui-leave,.spin-in.mui-enter{transition-duration:.5s;transition-timing-function:linear;transition-property:opacity,-webkit-transform}.scale-out-up.mui-leave.mui-leave-active{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}.scale-out-down.mui-leave{-webkit-transform:scale(1);transform:scale(1);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.scale-out-down.mui-leave.mui-leave-active{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}.spin-in.mui-enter{-webkit-transform:rotate(-.75turn);transform:rotate(-.75turn);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.spin-in-ccw.mui-enter,.spin-out.mui-leave{transition-property:opacity,-webkit-transform;transition-duration:.5s;transition-timing-function:linear}.spin-in.mui-enter.mui-enter-active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.spin-out.mui-leave.mui-leave-active{-webkit-transform:rotate(.75turn);transform:rotate(.75turn);opacity:0}.spin-in-ccw.mui-enter{-webkit-transform:rotate(.75turn);transform:rotate(.75turn);transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0}.spin-in-ccw.mui-enter.mui-enter-active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out-ccw.mui-leave{transition-duration:.5s;transition-timing-function:linear;-webkit-transform:rotate(0);transform:rotate(0);transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:1}.spin-out-ccw.mui-leave.mui-leave-active{-webkit-transform:rotate(-.75turn);transform:rotate(-.75turn);opacity:0}.slow{transition-duration:750ms!important}.linear{transition-timing-function:linear!important;-webkit-animation-timing-function:linear!important;animation-timing-function:linear!important}.ease{transition-timing-function:ease!important;-webkit-animation-timing-function:ease!important;animation-timing-function:ease!important}.ease-in{transition-timing-function:ease-in!important;-webkit-animation-timing-function:ease-in!important;animation-timing-function:ease-in!important}.ease-out{transition-timing-function:ease-out!important;-webkit-animation-timing-function:ease-out!important;animation-timing-function:ease-out!important}.ease-in-out{transition-timing-function:ease-in-out!important;-webkit-animation-timing-function:ease-in-out!important;animation-timing-function:ease-in-out!important}.bounce-in{transition-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;-webkit-animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important}.bounce-out{transition-timing-function:cubic-bezier(.485,.155,.515,.845)!important;-webkit-animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important;animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important}.bounce-in-out{transition-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;-webkit-animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important}.short-delay{transition-delay:.3s!important;-webkit-animation-delay:.3s!important;animation-delay:.3s!important}.long-delay{transition-delay:.7s!important;-webkit-animation-delay:.7s!important;animation-delay:.7s!important}.shake{-webkit-animation-name:shake-7;animation-name:shake-7}@-webkit-keyframes shake-7{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}@keyframes shake-7{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}.spin-cw{-webkit-animation-name:spin-cw-1turn;animation-name:spin-cw-1turn}@-webkit-keyframes spin-cw-1turn{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.spin-ccw{-webkit-animation-name:spin-cw-1turn;animation-name:spin-cw-1turn}@keyframes spin-cw-1turn{0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.wiggle{-webkit-animation-name:wiggle-7deg;animation-name:wiggle-7deg}@-webkit-keyframes wiggle-7deg{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,100%,30%,70%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes wiggle-7deg{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,100%,30%,70%{-webkit-transform:rotate(0);transform:rotate(0)}}.shake,.spin-ccw,.spin-cw,.wiggle{-webkit-animation-duration:.5s;animation-duration:.5s}.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.slow{-webkit-animation-duration:750ms!important;animation-duration:750ms!important}.fast{transition-duration:250ms!important;-webkit-animation-duration:250ms!important;animation-duration:250ms!important}
\ No newline at end of file

libraries/motion-ui/dist/motion-ui.min.js

+!function(n,e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):n.MotionUI=e(n.jQuery)}(this,function(n){"use strict";function e(e,a,r,u){function s(){e||a.hide(),m(),u&&u.apply(a)}function m(){a[0].style.transitionDuration=0,a.removeClass(d+" "+c+" "+r)}if(a=n(a).eq(0),a.length){if(null===o)return e?a.show():a.hide(),void u();var d=e?i[0]:i[1],c=e?t[0]:t[1];m(),a.addClass(r),a.css("transition","none"),requestAnimationFrame(function(){a.addClass(d),e&&a.show()}),requestAnimationFrame(function(){a[0].offsetWidth,a.css("transition",""),a.addClass(c)}),a.one("transitionend",s)}}!function(){Date.now||(Date.now=function(){return(new Date).getTime()});for(var n=["webkit","moz"],e=0;e<n.length&&!window.requestAnimationFrame;++e){var i=n[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var t=0;window.requestAnimationFrame=function(n){var e=Date.now(),i=Math.max(t+16,e);return setTimeout(function(){n(t=i)},i-e)},window.cancelAnimationFrame=clearTimeout}}();var i=["mui-enter","mui-leave"],t=["mui-enter-active","mui-leave-active"],o=function(){var n={transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend"},e=window.document.createElement("div");for(var i in n)if("undefined"!=typeof e.style[i])return n[i];return null}(),a={animateIn:function(n,i,t){e(!0,n,i,t)},animateOut:function(n,i,t){e(!1,n,i,t)}};return a});
\ No newline at end of file

libraries/motion-ui/docs/animations.md

+# Animations
+
+## Basics
+
+Use the `mui-animation` mixin to create CSS keyframe animations. The mixin accepts a keyframe function, like this:
+
+```scss
+.spin-cw {
+  @include mui-animation(spin(in, 360deg));
+}
+```
+
+The CSS output looks like this:
+
+```css
+@keyframes spin-cw-360deg {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); }
+}
+
+.spin-cw {
+  animation-name: spin-cw-360deg;
+}
+```
+
+**Note that in order to play properly, the element must have at least the property `animation-duration` applied to it as well.**
+
+There are seven keyframe functions:
+
+- `fade($from, $to)`
+- `hinge($state, $from, $axis, $perspective, $turn-origin)`
+- `shake($intensity)`
+- `slide($state, $direction, $amount)`
+- `spin($state, $direction, $amount)`
+- `wiggle($intensity)`
+- `zoom($from, $to)`
+
+All keyframe functions have parameters that customize the effect. For example, with `shake()` and `wiggle()` you can set the intensity of the effect, and with `spin()` you can set how many degrees the spin goes.
+
+If you're using a keyframe effect as-is, it can be inserted as a plain string instead of a function call, like so:
+
+.zoom-in {
+  @include mui-animation(zoom);
+}
+
+## Combination Effects
+
+Multiple keyframe effects can be combined into one. For example, you can combine a fade, slide, and spin into one animation, for something truly monstrous.
+
+To create a combined effect, just add more keyframe functions to the `mui-animation` mixin, as additional parameters.
+
+```scss
+.slide-and-fade-and-spin {
+  @include mui-animation(slide, fade, spin(120deg));
+}
+```
+
+**Note that this doesn't work with the `shake()` or `wiggle()` animations. Only animations with single start and end keyframes can be combined.**
+
+## Series Animations
+
+Multiple elements can be animated in series.
+
+To set it up, make sure each animating element shares a common parent.
+
+```html
+<div class="animation-wrapper">
+  <div class="shake"></div>
+  <div class="spin"></div>
+  <div class="wiggle"></div>
+</div>
+```
+
+Begin your series with the `mui-series()` mixin. Inside this mixin, attach animations to classes with the `mui-queue()` mixin. The first parameter is the length of the animation, the second parameter is an optional pause to create before the next animation, and the remaining parameters are a set of keyframe functions.
+
+```scss
+@include mui-series {
+  // 2 second shake
+  .shake    { @include mui-queue(2s, 0s, shake); }
+  // 1 second spin with a 2 second pause
+  .spin     { @include mui-queue(1s, 2s, spin); }
+  // 1 second zoom and fade
+  .fade-zoom { @include mui-queue(1s, 0s, fade, zoom); }
+}
+```
+
+To add a delay to the start of the queue, add the length in seconds to the `mui-series` mixin.
+
+```scss
+// 2 second delay before the first shake
+@include mui-series(2s) {
+  .shake  { @include mui-queue(2s, 0s, shake()); }
+  .spin   { @include mui-queue(1s, 2s, spin()); }
+  .wiggle { @include mui-queue(wiggle); }
+}
+```
+
+To trigger the queue, add the class `.is-animating` to the parent container. This can be done easily in JavaScript:
+
+```js
+// Plain JavaScript (IE10+)
+document.querySelector('.animation-wrapper').classList.add('is-animating');
+
+// jQuery
+$('.animation-wrapper').addClass('is-animating');
+```
+
+## Use with WOW.js
+
+Motion UI can be paired with WOW.js to animate elements in as the page scrolls. [Learn more about WOW.js integration.](wow.md);
+
+
+## Mixins
+
+
+### mui-animation()
+
+Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
+
+**Parameters:**
+
+- `effects...` (Function) - One or more effect functions to build the keyframe with.
+
+
+### mui-keyframes()
+
+Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element.
+
+**Parameters:**
+
+- `name` (String) - Name of the keyframe.
+- `effects...` (Function) - One or more effect functions to build the keyframe with.
+
+
+### mui-series()
+
+Creates a new animation queue.
+
+**Parameters:**
+
+- `delay` (Duration) - Delay in seconds or milliseconds to place at the front of the animation queue. (**Default:** 0s)
+
+
+### mui-queue()
+
+Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
+
+**Parameters:**
+
+- `duration` (Duration) - Length of the animation. (**Default:** 1s)
+- `gap` (Duration) - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one. (**Default:** 0s)
+- `keyframes...` (Function) - One or more effect functions to build the keyframe with.
+
+
+## Functions
+
+
+### fade()
+
+Creates a fading animation.
+
+**Parameters:**
+
+- `from` (Number) - Opacity to start at. (**Default:** 0)
+- `to` (Number) - Opacity to end at. (**Default:** 1)
+
+
+### hinge()
+
+Creates a hinge effect by rotating the element.
+
+**Parameters:**
+
+- `state` (Keyword) - State to transition to. (**Default:** in)
+- `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left)
+- `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge)
+- `perspective` (Number) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px)
+- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back)
+
+
+### shake()
+
+Creates a shaking animation.
+
+**Parameters:**
+
+- `intensity` (Percentage) - Intensity of the shake, as a percentage value. (**Default:** 7%)
+
+
+### slide()
+
+Creates a sliding animation.
+
+**Parameters:**
+
+- `state` (Keyword) - Whether to move to (`in`) or from (`out`) the element's default position. (**Default:** in)
+- `direction` (Keyword) - Direction to move. Can be `up`, `down`, `left`, or `right`. (**Default:** up)
+- `amount` (Number) - Distance to move. Can be any CSS length unit. (**Default:** 100%)
+
+
+### spin()
+
+Creates a spinning animation.
+
+**Parameters:**
+
+- `direction` (Keyword) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw)
+- `amount` (Number) - Amount to spin. Can be any CSS angle unit. (**Default:** 360deg)
+
+
+### wiggle()
+
+Creates a wiggling animation.
+
+**Parameters:**
+
+- `intensity` (Number) - Intensity of the wiggle. Can be any CSS angle unit. (**Default:** 7deg)
+
+
+### zoom()
+
+Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
+
+**Parameters:**
+
+- `from` (Number) - Size to start at. (**Default:** 1.5)
+- `to` (Number) - Size to end at. (**Default:** 1)
+

libraries/motion-ui/docs/classes.md

+# CSS Classes
+
+The Sass mixins are the heart of Motion UI, but the library also includes many pre-made CSS classes to get you up and running faster.
+
+## Defaults
+
+The pre-made classes all use these transition/animation defaults:
+
+- **Speed:** 500ms
+- **Timing:** Linear
+- **Delay:** 0s
+
+These defaults can be changed by modifying the [Motion UI settings](configuration.md);
+
+## Transition Classes
+
+- **Slide:**
+  - `.slide-in-down`
+  - `.slide-in-left`
+  - `.slide-in-up`
+  - `.slide-in-right`
+  - `.slide-out-down`
+  - `.slide-out-left`
+  - `.slide-out-up`
+  - `.slide-out-right`
+- **Fade:**
+  - `.fade-in`
+  - `.fade-out`
+- **Hinge:**
+  - `.hinge-in-from-top`
+  - `.hinge-in-from-right`
+  - `.hinge-in-from-bottom`
+  - `.hinge-in-from-left`
+  - `.hinge-in-from-middle-x`
+  - `.hinge-in-from-middle-y`
+  - `.hinge-out-from-top`
+  - `.hinge-out-from-right`
+  - `.hinge-out-from-bottom`
+  - `.hinge-out-from-left`
+  - `.hinge-out-from-middle-x`
+  - `.hinge-out-from-middle-y`
+- **Scale:**
+  - `.scale-in-up`
+  - `.scale-in-down`
+  - `.scale-out-up`
+  - `.scale-out-down`
+- **Spin:**
+  - `.spin-in`
+  - `.spin-out`
+  - `.spin-in-ccw`
+  - `.spin-out-ccw`
+
+## Animation Classes
+
+- `.shake`: shakes the element horizontally.
+- `.wiggle`: rotates the element back and forth.
+- `.spin-cw`: rotates the element once.
+- `.spin-ccw`: rotates the element once, counterclockwise.
+
+## Modifier Classes
+
+Modifiers work with both transitions and animations.
+
+- **Speed:**
+  - `.slow` (750ms)
+  - `.fast` (250ms)
+- **Timing:**
+  - `.linear`
+  - `.ease`
+  - `.ease-in`
+  - `.ease-out`
+  - `.ease-in-out`
+  - `.bounce-in`
+  - `.bounce-out`
+  - `.bounce-in-out`
+- **Delay:**
+  - `.short-delay` (300ms)
+  - `.long-delay` (700ms)
+
+
+

libraries/motion-ui/docs/configuration.md

+# Configuration
+
+Motion UI has six variables which store all of the library's settings. Each is a map of keys and values.
+
+## States
+
+```scss
+$motion-ui-states: (
+  in: 'enter',
+  out: 'leave',
+);
+```
+
+Motion UI defines two motion states: `in` and `out`, which create classes with the words `enter` and `leave` respectively.
+
+## Classes
+
+```scss
+$motion-ui-classes: (
+  chain: true,
+  prefix: 'mui-',
+  active: '-active',
+);
+```
+
+Different animation libraries have different ways of writing classes, but most libraries require a setup class, as well as an active class to trigger a transition or animation.
+
+The default configuration outputs classes like this:
+
+```css
+.fade-in.mui-enter {}
+.fade-in.mui-enter.mui-enter-active {}
+```
+
+Set the `chain` property of `$motion-ui-classes` to `false` to create classes like this:
+
+```css
+.fade-in-mui-enter {}
+.fade-in-mui-enter.fade-in-mui-enter-active {}
+```
+
+The class output can also be fine-tuned with the `prefix` and `active` properties.
+
+## Animation Defaults
+
+The maps `$motion-ui-speeds`, `$motion-ui-delays`, and `$motion-ui-easings` define terms for animation speeds, delays, and timing functions. For example, the `default` speed of animations is 500ms, while `slow` is 750ms, and `fast` is 250ms.
+
+## Other Settings
+
+Miscellaneous settings are in the `$motion-ui-settings` map. These settings define if animations include a fade, and what class to use for triggering an animation queue.
+
+```scss
+$motion-ui-settings: (
+  slide-and-fade: false,
+  hinge-and-fade: true,
+  scale-and-fade: true,
+  spin-and-fade: true,
+  activate-queue-class: 'is-animating'
+);
+```
+
+
+

libraries/motion-ui/docs/installation.md

+# Getting Started
+
+## Installation
+
+Install Motion UI with npm or Bower.
+
+```bash
+npm install motion-ui --save
+bower install motion-ui --save
+```
+
+## Sass Usage
+
+To import the Sass files into a project, add the load path `[modules_folder]/motion-ui/src` to your Sass configuration, then `@import` the library:
+
+```scss
+@import 'motion-ui';
+```
+
+**[Autoprefixer](https://github.com/postcss/autoprefixer) is required to use this library.** The library uses unprefixed `transition` and `animation` properties, which are then prefixed by Autoprefixer.
+
+The library includes two mixins which export all of the [default CSS](classes.md) for the framework. This includes:
+
+- Transitions for slide, fade, hinge, scale, and spin
+- Animation classes for spinning, shaking, and wiggling
+- Modifier classes for transition/animation speed, timing, and delay
+
+```scss
+@include motion-ui-transitions;
+@include motion-ui-animations;
+```
+
+## CSS Usage
+
+The package files also include these pre-made classes as a standalone CSS file, in minified and unminified flavors.
+
+- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.css`
+- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.css`
+
+## JavaScript Usage
+
+The package includes a small JavaScript library to help you transition elements in and out using Motion UI classes. It can be referenced as a browser global or a CommonJS/AMD package. Like the CSS, there's uncompressed and compressed versions included.
+
+- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.js`
+- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.js`
+
+Refer to the full [JavaScript documentation](javascript.md) to learn more about how the JS library works.
+
+
+

libraries/motion-ui/docs/javascript.md

+# JavaScript
+
+Motion UI includes a small JavaScript library that can play transitions, although this specific library is not required to take advantage of Motion UI's CSS. Animating in reveals a hidden element, while animating out hides a visible element.
+
+The library is available on `window.MotionUI`, or can imported with a module system.
+
+## Usage
+
+The `MotionUI` object has two methods: `animateIn()` and `animateOut()`. Both functions take three parameters:
+
+- `element`: a DOM element to animate.
+- `animation`: a transition class to use.
+- `cb` (optional): a callback to run when the transition finishes. Within the callback, the value of `this` is the DOM element that was transitioned.
+
+Here's an example:
+
+```js
+var $elem = $('[data-animate]');
+
+MotionUI.animateIn($elem, 'slide-in', function() {
+  console.log('Transition finished!');
+});
+```
+
+What about animations? Those can be triggered just by adding the animation class to an element. Here are examples with plain JavaScript and with jQuery:
+
+```js
+// Plain JavaScript (IE10+)
+document.querySelector('.animating-thing').classList.add('wiggle');
+
+// jQuery
+$('.animating-thing').addClass('wiggle');
+```
+
+
+

libraries/motion-ui/docs/readme.md

+# Motion UI Documentation
+
+### [Installation](installation.md)
+
+Installing Motion UI.
+
+### [Transitions](transitions.md)
+
+Using CSS transitions to show and hide components.
+
+### [Animations](animations.md)
+
+Using CSS animations to add effects.
+
+### [CSS Classes](classes.md)
+
+Using the library's pre-made CSS classes.
+
+### [JavaScript](javascript.md)
+
+Using the JavaScript plugin to transition elements in and out.
+
+### [Configuration](configuration.md)
+
+Customizing Motion UI.
+
+### [WOW.js](wow.md)
+
+Using Motion UI with WOW.js.
+
+
+

libraries/motion-ui/docs/src/_template.hbs

+# {{ title }}
+{{ docs }}
+
+{{#if sass}}
+{{#if sass.mixin}}
+## Mixins
+{{#each sass.mixin}}{{#private this}}
+
+### {{this.context.name}}()
+
+{{this.description}}
+{{#if this.parameter}}
+**Parameters:**
+{{#each this.parameter}}
+
+- `{{this.name}}` ({{this.type}}) - {{this.description}}{{#if this.default}} (**Default:** {{this.default}}){{/if}}{{/each}}
+{{/if}}
+{{/private}}{{/each}}
+{{/if}}
+{{/if}}
+
+{{#if sass}}
+{{#if sass.function}}
+## Functions
+{{#each sass.function}}{{#private this}}
+
+### {{this.context.name}}()
+
+{{this.description}}
+{{#if this.parameter}}
+**Parameters:**
+{{#each this.parameter}}
+
+- `{{this.name}}` ({{this.type}}) - {{this.description}}{{#if this.default}} (**Default:** {{this.default}}){{/if}}{{/each}}
+{{/if}}
+{{/private}}{{/each}}
+{{/if}}
+{{/if}}

libraries/motion-ui/docs/src/animations.md

+---
+title: Animations
+sass:
+ - src/effects/*.scss
+ - src/util/_animation.scss
+ - src/util/_keyframe.scss
+ - src/util/_series.scss
+---
+
+## Basics
+
+Use the `mui-animation` mixin to create CSS keyframe animations. The mixin accepts a keyframe function, like this:
+
+```scss
+.spin-cw {
+  @include mui-animation(spin(in, 360deg));
+}
+```
+
+The CSS output looks like this:
+
+```css
+@keyframes spin-cw-360deg {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); }
+}
+
+.spin-cw {
+  animation-name: spin-cw-360deg;
+}
+```
+
+**Note that in order to play properly, the element must have at least the property `animation-duration` applied to it as well.**
+
+There are seven keyframe functions:
+
+- `fade($from, $to)`
+- `hinge($state, $from, $axis, $perspective, $turn-origin)`
+- `shake($intensity)`
+- `slide($state, $direction, $amount)`
+- `spin($state, $direction, $amount)`
+- `wiggle($intensity)`
+- `zoom($from, $to)`
+
+All keyframe functions have parameters that customize the effect. For example, with `shake()` and `wiggle()` you can set the intensity of the effect, and with `spin()` you can set how many degrees the spin goes.
+
+If you're using a keyframe effect as-is, it can be inserted as a plain string instead of a function call, like so:
+
+.zoom-in {
+  @include mui-animation(zoom);
+}
+
+## Combination Effects
+
+Multiple keyframe effects can be combined into one. For example, you can combine a fade, slide, and spin into one animation, for something truly monstrous.
+
+To create a combined effect, just add more keyframe functions to the `mui-animation` mixin, as additional parameters.
+
+```scss
+.slide-and-fade-and-spin {
+  @include mui-animation(slide, fade, spin(120deg));
+}
+```
+
+**Note that this doesn't work with the `shake()` or `wiggle()` animations. Only animations with single start and end keyframes can be combined.**
+
+## Series Animations
+
+Multiple elements can be animated in series.
+
+To set it up, make sure each animating element shares a common parent.
+
+```html
+<div class="animation-wrapper">
+  <div class="shake"></div>
+  <div class="spin"></div>
+  <div class="wiggle"></div>
+</div>
+```
+
+Begin your series with the `mui-series()` mixin. Inside this mixin, attach animations to classes with the `mui-queue()` mixin. The first parameter is the length of the animation, the second parameter is an optional pause to create before the next animation, and the remaining parameters are a set of keyframe functions.
+
+```scss
+@include mui-series {
+  // 2 second shake
+  .shake    { @include mui-queue(2s, 0s, shake); }
+  // 1 second spin with a 2 second pause
+  .spin     { @include mui-queue(1s, 2s, spin); }
+  // 1 second zoom and fade
+  .fade-zoom { @include mui-queue(1s, 0s, fade, zoom); }
+}
+```
+
+To add a delay to the start of the queue, add the length in seconds to the `mui-series` mixin.
+
+```scss
+// 2 second delay before the first shake
+@include mui-series(2s) {
+  .shake  { @include mui-queue(2s, 0s, shake()); }
+  .spin   { @include mui-queue(1s, 2s, spin()); }
+  .wiggle { @include mui-queue(wiggle); }
+}
+```
+
+To trigger the queue, add the class `.is-animating` to the parent container. This can be done easily in JavaScript:
+
+```js
+// Plain JavaScript (IE10+)
+document.querySelector('.animation-wrapper').classList.add('is-animating');
+
+// jQuery
+$('.animation-wrapper').addClass('is-animating');
+```
+
+## Use with WOW.js
+
+Motion UI can be paired with WOW.js to animate elements in as the page scrolls. [Learn more about WOW.js integration.](wow.md);