diff --git a/demo/3.1_put_all_together.html b/demo/3.1_put_all_together.html
index 6105820..dd546b1 100644
--- a/demo/3.1_put_all_together.html
+++ b/demo/3.1_put_all_together.html
@@ -6,7 +6,7 @@
     <title>JavaScript SpatialNavigation Demo Page</title>
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="css/style_3.css">
+    <link rel="stylesheet" href="css/style_3.1.css">
 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     <script src="../spatial_navigation.js"></script>
diff --git a/demo/3.2_like_youtube_tv.html b/demo/3.2_like_youtube_tv.html
new file mode 100644
index 0000000..b940d87
--- /dev/null
+++ b/demo/3.2_like_youtube_tv.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>JavaScript SpatialNavigation Demo Page</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style_3.2.css">
+
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="../spatial_navigation.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+      $(function() {
+        var SN = SpatialNavigation;
+
+        SN.init();
+
+        SN.set({
+          straightOnly: true
+        });
+
+        SN.add('content', {
+          selector: '.content .item',
+          enterTo: 'last-focused'
+        });
+
+        SN.add('search', {
+          selector: '#search-box-placeholder'
+        });
+
+        SN.add('sidebar', {
+          selector: '#sidebar'
+        });
+
+        SN.add('menu', {
+          selector: '#menu .item',
+          defaultElement: '#menu .item:first-child',
+          enterTo: 'default-element',
+          leaveFor: {
+            right: '@content',
+            up: '',
+            down: '',
+            left: ''
+          }
+        });
+
+        $(window).on('sn:focused', function(evt) {
+          var $target = $(evt.target);
+          if ($target.is('#sidebar')) {
+            $('#sidebar').addClass('focused');
+            SN.disable('sidebar');
+            setTimeout(function() {
+              SN.focus('menu')
+            }, 200);
+          } else if (!$target.parents('#sidebar').length) {
+            $('#sidebar').removeClass('focused');
+            SN.enable('sidebar');
+          }
+        });
+
+        var currentRow = 1;
+        var duringAnimation = false;
+        $('.content .item')
+          .on('sn:willfocus', function() {
+            var $target = $(this);
+            var row = $target.parents('.contentgroup').data('content-row');
+            if (row > currentRow) {
+              SN.pause();
+
+              $('.contentgroup[data-content-row="' + currentRow + '"]')
+                .addClass('fading-out')
+                .fadeOut(300);
+
+              window.requestAnimationFrame(function() {
+                var $div = $('<div>').addClass('animate placeholder')
+                                     .prependTo('#content');
+
+                window.requestAnimationFrame(function() {
+                  $div.removeClass('placeholder').on('transitionend', function() {
+                    $div.remove();
+                    SN.focus($target);
+                    SN.resume();
+                  });
+                });
+              });
+
+              currentRow = row;
+              return false;
+            }
+            currentRow = row;
+          })
+          .on('sn:willmove', function(evt) {
+            if (duringAnimation) {
+              return false;
+            }
+
+            var detail = evt.originalEvent.detail;
+            if (detail.direction == 'up' && detail.cause == 'keydown' && currentRow > 1) {
+              duringAnimation = true;
+
+              window.requestAnimationFrame(function() {
+                var $targetRow = $('.contentgroup[data-content-row="' + (currentRow - 1) + '"]');
+                var $div = $('<div>').addClass('animate').prependTo('#content');
+                $targetRow.fadeIn(300);
+
+                window.requestAnimationFrame(function() {
+                  $div.addClass('placeholder').on('transitionend', function() {
+                    $div.remove();
+                    $targetRow.removeClass('fading-out');
+                    duringAnimation = false;
+                    SN.move('up');
+                  });
+                });
+              });
+
+              return false;
+            }
+          });
+
+        SN.makeFocusable();
+        SN.focus('content');
+      });
+    </script>
+  </head>
+  <body>
+    <div id="container">
+      <div id="sidebar">
+        <div id="icons">
+          <div><span class="fa fa-home"></span></div>
+          <div><span class="fa fa-star"></span></div>
+          <div><span class="fa fa-music"></span></div>
+          <div><span class="fa fa-ellipsis-v"></span></div>
+        </div>
+        <div id="menu">
+          <div class="item"><i class="fa fa-user"></i> Login</div>
+          <div class="item"><i class="fa fa-search"></i> Search</div>
+          <div class="item"><i class="fa fa-home"></i> Home</div>
+          <div class="item"><i class="fa fa-star"></i> Star</div>
+          <div class="item"><i class="fa fa-music"></i> Music</div>
+          <div class="item"><i class="fa fa-film"></i> Film</div>
+        </div>
+      </div>
+      <div class="mainbox">
+        <div id="search-box-placeholder"><i class="fa fa-search"></i></div>
+        <div id="content">
+          <div class="contentgroup" data-content-row="1">
+            <h1>Title 1</h1>
+            <div class="content">
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+            </div>
+          </div>
+          <div class="contentgroup" data-content-row="2">
+            <h1>Title 2</h1>
+            <div class="content">
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+            </div>
+          </div>
+          <div class="contentgroup" data-content-row="3">
+            <h1>Title 3</h1>
+            <div class="content">
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+            </div>
+          </div>
+          <div class="contentgroup" data-content-row="4">
+            <h1>Title 4</h1>
+            <div class="content">
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+              <div class="item"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/demo/css/style_3.css b/demo/css/style_3.1.css
similarity index 100%
rename from demo/css/style_3.css
rename to demo/css/style_3.1.css
diff --git a/demo/css/style_3.2.css b/demo/css/style_3.2.css
new file mode 100644
index 0000000..1edf53c
--- /dev/null
+++ b/demo/css/style_3.2.css
@@ -0,0 +1,184 @@
+html, body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  background-color: #444;
+  font-family: sans-serif;
+}
+
+:focus {
+  outline: 0;
+}
+
+#container {
+  height: 100%;
+  overflow: hidden;
+}
+
+#sidebar {
+  position: absolute;
+  left: -300px;
+  top: 0;
+  width: 370px;
+  height: 100%;
+  box-shadow: 2px 0 20px 0 black;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: left 0.5s, background-color 0.3s;
+  background-color: rgba(255, 255, 255, 0.1);
+  z-index: 100;
+}
+
+#sidebar:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+#sidebar.focused {
+  left: 0;
+}
+
+#icons {
+  margin-right: 22px;
+  transition: opacity 0.5s;
+  z-index: 10;
+}
+
+#icons div {
+  text-align: center;
+  margin: 30px 0;
+}
+
+#icons .fa {
+  color: #ccc;
+  font-size: 30px;
+}
+
+#sidebar.focused #icons {
+  opacity: 0;
+}
+
+#menu {
+  width: 100%;
+  height: 100%;
+  background-color: red;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: opacity 0.5s;
+  box-sizing: border-box;
+  padding-top: 70px;
+}
+
+#sidebar.focused #menu {
+  opacity: 1;
+}
+
+#menu .item {
+  height: 70px;
+  line-height: 70px;
+  color: white;
+  font-size: 25px;
+  padding-left: 90px;
+  box-sizing: border-box;
+  cursor: default;
+  display: none;
+  cursor: pointer;
+}
+
+#menu .item:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+#menu .item:focus {
+  background-color: white;
+  color: red;
+}
+
+#menu .item .fa {
+  width: 40px;
+}
+
+#sidebar.focused #menu .item {
+  display: block;
+}
+
+.mainbox {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 40px 0 0 120px;
+}
+
+#search-box-placeholder {
+  width: 70%;
+  height: 50px;
+  line-height: 50px;
+  background-color: #666;
+  box-sizing: border-box;
+  padding-left: 15px;
+  cursor: pointer;
+  font-size: 25px;
+  color: #aaa;
+}
+
+#search-box-placeholder:hover, #search-box-placeholder:focus {
+  color: black;
+  background-color: white;
+}
+
+#content {
+  height: 100%;
+  position: relative;
+}
+
+#content .content {
+  white-space: nowrap;
+  font-size: 0;
+}
+
+#content h1 {
+  font-size: 30px;
+  height: 80px;
+  padding: 0;
+  margin: 0;
+  line-height: 80px;
+}
+
+#content .item {
+  display: inline-block;
+  width: 25%;
+  padding-bottom: 30%;
+  background-color: #666;
+  font-size: 1rem;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+#content .item:focus {
+  background-color: white;
+}
+
+#content .animate {
+  width: 25%;
+  padding-bottom: 0;
+  transition: padding-bottom 0.3s ease;
+}
+
+#content .placeholder {
+  width: 25%;
+  padding-bottom: calc(30% + 80px);
+}
+
+.contentgroup {
+  width: 100%;
+  z-index: 2;
+}
+
+.contentgroup.fading-out {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
