diff --git a/server/documents/collections/message.html.eco b/server/documents/collections/message.html.eco
index e70818cc5..d58a59278 100755
--- a/server/documents/collections/message.html.eco
+++ b/server/documents/collections/message.html.eco
@@ -93,7 +93,7 @@ themes      : ['Default', 'GitHub', 'Gmail']
 
   <div class="example">
     <h4 class="ui header">Hidden</h4>
-    <p>Text Blocks can be hidden</p>
+    <p>A message can be hidden</p>
     <div class="existing code">
       <div class="ui hidden message">
         <p>You can't see me</p>
@@ -103,7 +103,7 @@ themes      : ['Default', 'GitHub', 'Gmail']
 
   <div class="example">
     <h4 class="ui header">Visible</h4>
-    <p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
+    <p>A message can be set to visible to force itself to be shown.</p>
     <div class="ui visible message">
       <p>You can always see me</p>
     </div>
diff --git a/server/documents/elements/image.html.eco b/server/documents/elements/image.html.eco
index 731ccda35..4a54eedc5 100755
--- a/server/documents/elements/image.html.eco
+++ b/server/documents/elements/image.html.eco
@@ -53,10 +53,16 @@ themes      : ['Default']
     States
   </h2>
 
+  <div class="example">
+    <h4 class="ui header">Hidden</h4>
+    <p>An image can be hidden</p>
+    <img class="hidden ui image" src="/images/wireframe/image.png">
+  </div>
+
   <div class="example">
     <h4 class="ui header">Disabled</h4>
     <p>An image can show that it is disabled and cannot be selected</p>
-    <img class="medium disabled ui image" src="/images/wireframe/image.png">
+    <img class="disabled medium ui image" src="/images/wireframe/image.png">
   </div>
 
   <h2 class="ui dividing header">Variations</h2>
diff --git a/server/documents/hotfix.html.eco b/server/documents/hotfix.html.eco
index a62141fdf..f3a3d7c64 100755
--- a/server/documents/hotfix.html.eco
+++ b/server/documents/hotfix.html.eco
@@ -9,25 +9,16 @@ type       : 'Library'
 <!-- TEST JS HERE !-->
 <script type="text/javascript">
 $(document).ready(function() {
-    $('.ui.sidebar.first')
-        .sidebar({
-            transition: 'overlay',
-            exclusive: true,
-            dimPage: false,
-            closable: false
+    $('.card')
+        .transition({
+            interval: 200,
+            animation: 'fade'
         })
-        .sidebar('attach events', '.button.open-first-sidebar')
-    ;
-    $('.ui.sidebar.second')
-        .sidebar({
-            transition: 'overlay',
-            exclusive: true,
-            dimPage: false,
-            closable: false
+        .transition({
+            interval: 200,
+            animation: 'scale'
         })
-        .sidebar('attach events', '.button.open-second-sidebar')
     ;
-
 });
 </script>
 
@@ -35,35 +26,145 @@ $(document).ready(function() {
 <style type="text/css">
 </style>
 
-<body>
-    <aside class="ui left vertical labeled icon sidebar menu first">
-        <a class="item">
-            <i class="home icon"></i>
-            Sidebar 1
-        </a>
-        <a class="item">
-            <button class="ui button teal open-second-sidebar">
-                Open sidebar 2
-            </button>
-        </a>
-    </aside>
-    <aside class="ui left vertical labeled icon sidebar menu second">
-        <a class="item">
-            <i class="home icon"></i>
-            Sidebar 2
-        </a>
-        <a class="item">
-            <button class="ui button teal open-first-sidebar">
-                Open sidebar 1
-            </button>
-        </a>
-    </aside>
-    <main class="pusher">
-        <button class="ui button teal open-first-sidebar">
-            Open sidebar 1
-        </button>
-        <button class="ui button teal open-second-sidebar">
-            Open sidebar 2
-        </button>
-    </main>
-</body>
\ No newline at end of file
+<div style="max-width: 1000px;margin:2em auto;">
+<div class="ui cards">
+    <div class="green card">
+        <div class="image">
+                <img src="images/wireframe/image.png" class="visible content">
+            </div>
+            <div class="content">
+                <a class="header">Card 0</a>
+                <div class="meta">
+                    <div class="ui small star rating"></div>
+                </div>
+                <div class="description">
+                    <a>
+                        <i class="red clock icon"></i>
+                        Today
+                    </a>
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                    <i class="like icon"></i>
+                    30+ fans
+                </span>
+            </div>
+    </div>
+    <div class="green card">
+        <div class="image">
+                <img src="images/wireframe/image.png" class="visible content">
+            </div>
+            <div class="content">
+                <a class="header">Card 1</a>
+                <div class="meta">
+                    <div class="ui small star rating"></div>
+                </div>
+                <div class="description">
+                    <a>
+                        <i class="red clock icon"></i>
+                        Today
+                    </a>
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                    <i class="like icon"></i>
+                    30+ fans
+                </span>
+            </div>
+    </div>
+    <div class="green card">
+        <div class="image">
+                <img src="images/wireframe/image.png" class="visible content">
+            </div>
+            <div class="content">
+                <a class="header">Card 2</a>
+                <div class="meta">
+                    <div class="ui small star rating"></div>
+                </div>
+                <div class="description">
+                    <a>
+                        <i class="red clock icon"></i>
+                        Today
+                    </a>
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                    <i class="like icon"></i>
+                    30+ fans
+                </span>
+            </div>
+    </div>
+    <div class="green card">
+        <div class="image">
+                <img src="images/wireframe/image.png" class="visible content">
+            </div>
+            <div class="content">
+                <a class="header">Card 3</a>
+                <div class="meta">
+                    <div class="ui small star rating"></div>
+                </div>
+                <div class="description">
+                    <a>
+                        <i class="red clock icon"></i>
+                        Today
+                    </a>
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                    <i class="like icon"></i>
+                    30+ fans
+                </span>
+            </div>
+    </div>
+    <div class="green card">
+        <div class="image">
+                <img src="images/wireframe/image.png" class="visible content">
+            </div>
+            <div class="content">
+                <a class="header">Card 4</a>
+                <div class="meta">
+                    <div class="ui small star rating"></div>
+                </div>
+                <div class="description">
+                    <a>
+                        <i class="red clock icon"></i>
+                        Today
+                    </a>
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                    <i class="like icon"></i>
+                    30+ fans
+                </span>
+            </div>
+    </div>
+    <div class="green card">
+        <div class="image">
+                <img src="images/wireframe/image.png" class="visible content">
+            </div>
+            <div class="content">
+                <a class="header">Card 5</a>
+                <div class="meta">
+                    <div class="ui small star rating"></div>
+                </div>
+                <div class="description">
+                    <a>
+                        <i class="red clock icon"></i>
+                        Today
+                    </a>
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                    <i class="like icon"></i>
+                    30+ fans
+                </span>
+            </div>
+    </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/server/documents/modules/transition.html.eco b/server/documents/modules/transition.html.eco
index 26ddb4155..aa5554eaf 100755
--- a/server/documents/modules/transition.html.eco
+++ b/server/documents/modules/transition.html.eco
@@ -255,6 +255,63 @@ type        : 'UI Module'
         .transition('scale')
       ;
       </div>
+      <h2 class="ui dividing header">Grouped Transitions</h2>
+
+      <h4 class="ui header">Animation Intervals</h4>
+      <p>When animating several different items in a group you may want to use an interval so that each item appears consecutively</p>
+      <div class="code" data-demo="true" data-title="Animation Intervals">
+      $('.jiggle.images .image')
+        .transition({
+          animation : 'jiggle',
+          duration  : 800,
+          interval  : 200
+        })
+      ;
+      </div>
+      <div class="ui small jiggle images">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+      </div>
+      <h4 class="ui header">Animation Order</h4>
+      <p>When hiding groups of elements, the default setting uses <code>reverse: 'auto'</code>. This will automatically reverse the order of animations from back-to-front when hiding elements to avoid layout reflows. When showing elements the order will return to its normal sequence.</p>
+      <div class="code" data-demo="true" data-title="Reversing Animation Order">
+      $('.sequenced.images .image')
+        .transition({
+          animation : 'scale',
+          reverse   : 'auto', // default setting
+          interval  : 200
+        })
+      ;
+      </div>
+      <div class="ui small sequenced images">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+      </div>
+
+      <h4 class="ui header">Forcing Order</h4>
+      <p>If you need to manually force reverse animations regardless of the animation direction, you can use <code>reverse: true</code>.</p>
+      <div class="code" data-demo="true" data-title="Reversing Animation Order">
+      // always hide in reverse
+      $('.reverse.images .image')
+        .transition({
+          animation : 'pulse',
+          reverse   : true,
+          interval  : 200
+        })
+      ;
+      </div>
+      <div class="ui small reverse images">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+        <img src="/images/wireframe/image.png" class="ui wireframe image">
+      </div>
+
+
 
       <h2 class="ui dividing header">Transition Direction</h2>
 
@@ -493,7 +550,7 @@ type        : 'UI Module'
         </tr>
         <tr>
           <td>useFailSafe</td>
-          <td>false</td>
+          <td>true</td>
           <td>If enabled a <code>timeout</code> will be added to ensure <code>animationend</code> callback occurs even if element is hidden</td>
         </tr>
         <tr>
