updates motion-ui documentation to clarify JavaScript usage and inclusion.

diff --git a/docs/pages/motion-ui.md b/docs/pages/motion-ui.md
index 5d3ea3596d611fc154304b7870a6189d9dc3a3b1..3db3a2ffc3a264d8d3ab7f0a1a33645c44f5a793 100644 (file)
--- a/docs/pages/motion-ui.md
+++ b/docs/pages/motion-ui.md
@@ -164,3 +164,24 @@ You can use the same five transition effects to create CSS animations as well. T
     <img class="thumbnail" src= "assets/img/square-3.jpg" id="series-example-3">
   </div>
 </div>
+
+---
+
+## JavaScript Reference
+
+Motion UI includes a tiny JavaScript utility that will work anywhere as long as jQuery is loaded. However, Foundation 6 includes a customized version of this code that is included in `js/foundation.util.motion.js`. If you are using the Foundation version of this utility, and you wish to animate your own elements, trigger it this way:
+
+```js
+var elem = $('#elem-to-animate');
+
+Foundation.Motion.animateIn(elem, animationClass [, callback]);
+Foundation.Motion.animateOut(elem, animationClass [, callback]);
+```
+
+The callback is optional in this case, and will fire when the animation is complete.
+<div class="callout primary">
+  <p>Please note that the duration/animation speed for Motion UI animations are controlled via Sass mixin variables. The JavaScript handles the addition and removal of classes and event listener/callback firing only.
+  <br>
+  If you are individually including your `<script>` tags, make sure you are including the `js/foundation.util.motion.js` path.
+  </p>
+</div>