From b08a56da4917af859ac894ae86955cb1ec26f9bc Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 5 Aug 2018 23:59:28 +0200
Subject: [PATCH 1/2] docs: move Motion UI Toggler example to its own section

---
 docs/pages/motion-ui.md | 59 ++++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/docs/pages/motion-ui.md b/docs/pages/motion-ui.md
index 2b37b9aadc..198a8302ea 100644
--- a/docs/pages/motion-ui.md
+++ b/docs/pages/motion-ui.md
@@ -6,29 +6,8 @@ library:
   docs: https://github.com/zurb/motion-ui/tree/master/docs
 ---
 
-Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including [Toggler](toggler.html), [Reveal](reveal.html), and [Orbit](orbit.html). The transitions are powered by special transition classes that the Motion UI Sass creates. For example, here are two instances of Toggler&mdash;one using fade classes (`.fade-in` and `.fade-out`), and one using slide classes (`.slide-in-down` and `.slide-out-up`).
+Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including [Toggler](toggler.html), [Reveal](reveal.html), and [Orbit](orbit.html).
 
-```html
-<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
-  <p>This panel fades.</p>
-</div>
-
-<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
-  <p>This panel slides.</p>
-</div>
-```
-
-<button type="button" class="button" data-toggle="motion-example-1">Fade</button><button type="button" class="button" data-toggle="motion-example-2">Slide</button>
-<div class="grid-x grid-margin-x">
-  <div class="cell small-6">
-    <div data-toggler data-animate="fade-in fade-out" class="callout secondary ease" id="motion-example-1">
-      <p>This panel <strong>fades</strong>.</p>
-    </div>
-  </div>
-  <div class="cell small-6">
-    <div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary ease" id="motion-example-2">
-      <p>This panel <strong>slides</strong>.</p>
-    </div>
   </div>
 </div>
 
@@ -78,6 +57,42 @@ Or, another way to start using Motion UI is through a CDN.
 
 ---
 
+## Usage in Components
+
+Various Foundation components provide options for to use Motion UI animations when changing state. Here are the options for each plugin that support Motion UI:
+- [Orbit](orbit.html): `data-animate`
+- [Reveal](reveal.html): `data-animation-in`, `data-animation-out`
+- [Toggler](toggler.html): `data-animate`
+- [Responsive Toggler](responsive-navigation.html): `data-animate`
+
+For example, here are two instances of Toggler&mdash;one using fade classes (`.fade-in` and `.fade-out`), and one using slide classes (`.slide-in-down` and `.slide-out-up`). See all availaible classes in [build-in transitions](#built-in-transitions) below.
+
+```html
+<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
+  <p>This panel fades.</p>
+</div>
+
+<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
+  <p>This panel slides.</p>
+</div>
+```
+
+<button type="button" class="button" data-toggle="motion-example-1">Fade</button><button type="button" class="button" data-toggle="motion-example-2">Slide</button>
+<div class="grid-x grid-margin-x">
+  <div class="cell small-6">
+    <div data-toggler data-animate="fade-in fade-out" class="callout secondary ease" id="motion-example-1">
+      <p>This panel <strong>fades</strong>.</p>
+    </div>
+  </div>
+  <div class="cell small-6">
+    <div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary ease" id="motion-example-2">
+      <p>This panel <strong>slides</strong>.</p>
+    </div>
+  </div>
+</div>
+
+---
+
 ## Built-in Transitions
 
 Motion UI includes more than two dozen built-in transition classes. They can be enabled by adding this line to your Sass file, after you've imported the library:

From bd4bf11d23e8b815cb9690f87bbb8aafe58d2580 Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 5 Aug 2018 23:59:44 +0200
Subject: [PATCH 2/2] docs: add a simpler example in Motion UI docs header

---
 docs/pages/motion-ui.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/pages/motion-ui.md b/docs/pages/motion-ui.md
index 198a8302ea..ed99f6573d 100644
--- a/docs/pages/motion-ui.md
+++ b/docs/pages/motion-ui.md
@@ -8,9 +8,14 @@ library:
 
 Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including [Toggler](toggler.html), [Reveal](reveal.html), and [Orbit](orbit.html).
 
+<div class="text-center">
+  <button type="button" class="button" data-toggle="motion-header-example">Animate!</button>
+  <div data-toggler data-animate="fade-in fade-out" id="motion-header-example" style="display: none;">
+    <img src="/assets/img/generic/rectangle-7.jpg" style="width: 100%;">
   </div>
 </div>
 
+
 ---
 
 ## Installing