diff --git a/src/css/g-panels.css b/src/css/g-panels.css
new file mode 100644
index 0000000000..b32b2d9c93
--- /dev/null
+++ b/src/css/g-panels.css
@@ -0,0 +1,335 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+@host {
+  display: block;
+  position: relative;
+  outline: none;
+  overflow: hidden;
+}
+
+@host > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* TODO(sorvell): note: this is a workaround for reference combinators 
+approach defined in shadowDom spec */
+/* TODO(sorvell): expose animation timing via css variable */
+@host > .transition {
+  -webkit-transition: all 0.5s ease-in-out;
+}
+
+@host > .animate {
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+}
+
+/*
+  TODO(sorvell): include a reasonable set of default overlay opening 
+  animations. What's here right now is ad hoc.
+
+  NOTE: until reference combinators (presumably), need to include this file
+  in any document that wants panel transitions.
+*/
+
+/* fade */
+@host.g-panels-fade > .panels-ascending-from,
+@host.g-panels-fade > .panels-descending-from {
+  -webkit-animation-name: g-panels-fadeOut;
+}
+@host.g-panels-fade > .panels-ascending-to,
+@host.g-panels-fade > .panels-descending-to {
+  -webkit-animation-name: g-panels-fadeIn;
+}
+
+/* hslide */
+@host.g-panels-hslide > .panels-ascending-from {
+  -webkit-animation-name: g-panels-slideLeft;
+}
+@host.g-panels-hslide > .panels-ascending-to {
+  -webkit-animation-name: g-panels-slideFromRight;
+}
+@host.g-panels-hslide > .panels-descending-from {
+  -webkit-animation-name: g-panels-slideRight;
+}
+@host.g-panels-hslide > .panels-descending-to {
+  -webkit-animation-name: g-panels-slideFromLeft;
+}
+
+/* vslide */
+@host.g-panels-vslide > .panels-ascending-from {
+  -webkit-animation-name: g-panels-slideTop;
+}
+@host.g-panels-vslide > .panels-ascending-to {
+  -webkit-animation-name: g-panels-slideFromBottom;
+}
+@host.g-panels-vslide > .panels-descending-from {
+  -webkit-animation-name: g-panels-slideBottom;
+}
+@host.g-panels-vslide > .panels-descending-to {
+  -webkit-animation-name: g-panels-slideFromTop;
+}
+
+/* hslideover */
+@host.g-panels-hslideover > .panels-ascending-to {
+  -webkit-animation-name: g-panels-slideFromRight;
+}
+@host.g-panels-hslideover > .panels-descending-to {
+  -webkit-animation-name: g-panels-slideFromLeft;
+}
+
+/* vslideover */
+@host.g-panels-vslideover > .panels-ascending-to {
+  -webkit-animation-name: g-panels-slideFromBottom;
+}
+@host.g-panels-vslideover > .panels-descending-to {
+  -webkit-animation-name: g-panels-slideFromTop;
+}
+
+/* explode */
+@host.g-panels-explode > .panels-ascending-from,
+@host.g-panels-explode > .panels-descending-from {
+  -webkit-animation-name: g-panels-explodeOut;
+}
+@host.g-panels-explode > .panels-ascending-to,
+@host.g-panels-explode > .panels-descending-to {
+  -webkit-animation-name: g-panels-explodeIn;
+}
+
+/* scale-slide */
+@host.g-panels-scale-slide > .panels-ascending-from {
+  -webkit-animation-name: g-panels-fadeScaleOut;
+}
+@host.g-panels-scale-slide > .panels-ascending-to {
+  -webkit-animation-name: g-panels-slideFromRight;
+}
+@host.g-panels-scale-slide > .panels-descending-from {
+  -webkit-animation-name: g-panels-slideRight;
+}
+@host.g-panels-scale-slide > .panels-descending-to {
+  -webkit-animation-name: g-panels-fadeScaleIn;
+}
+
+/* fly-up-right */
+@host.g-panels-fly-up-right > .panels-ascending-from {
+  -webkit-animation-name: g-panels-flyOutRight;
+}
+@host.g-panels-fly-up-right > .panels-ascending-to {
+  -webkit-animation-name: g-panels-fadeInPartial;
+}
+@host.g-panels-fly-up-right > .panels-descending-from {
+  -webkit-animation-name: g-panels-fadeOutPartial;
+}
+@host.g-panels-fly-up-right > .panels-descending-to {
+  -webkit-animation-name: g-panels-flyInLeft;
+}
+
+@-webkit-keyframes g-panels-fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes g-panels-fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes g-panels-fadeInPartial {
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes g-panels-fadeOutPartial {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
+}
+
+@-webkit-keyframes g-panels-fadeScaleIn {
+  0% {
+    z-index: 0;
+    opacity: 0.5;
+    -webkit-transform: scale(0.9);
+  }
+  20% {
+    z-index: 0;
+    -webkit-transform: scale(0.9);
+  }
+  100% {
+    z-index: 0;
+    opacity: 1;
+    -webkit-transform: scale(1);
+  }
+}
+
+@-webkit-keyframes g-panels-fadeScaleOut {
+  0% {
+    z-index: 0;
+    opacity: 1;
+    -webkit-transform: scale(1);
+  }
+  20% {
+    z-index: 0;
+    -webkit-transform: scale(0.9);
+  }
+  100% {
+    z-index: 0;
+    opacity: 0.5;
+    -webkit-transform: scale(0.9);
+  }
+}
+
+@-webkit-keyframes g-panels-slideRight {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideFromRight {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideLeft {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideFromLeft {
+  0% {
+    z-index: 1;  
+    -webkit-transform: translate3d(-100%, 0, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideBottom {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 100%, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideFromBottom {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 100%, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideTop {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, -100%, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-slideFromTop {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes g-panels-explodeOut {
+  0% {
+    -webkit-transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes g-panels-explodeIn {
+  0% {
+    z-index: 1;
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes g-panels-flyOutRight {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(0)  rotate(0);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(10%, -110%, 0) rotate(5deg);
+  }
+}
+
+@-webkit-keyframes g-panels-flyInLeft {
+  0% {
+    z-index: 1;
+    -webkit-transform: translate3d(10%, -110%, 0) rotate(5deg);
+  }
+  100% {
+    z-index: 1;
+    -webkit-transform: translate3d(0) rotate(0deg);
+  }
+}
\ No newline at end of file
diff --git a/src/g-panels.html b/src/g-panels.html
new file mode 100644
index 0000000000..56965449c7
--- /dev/null
+++ b/src/g-panels.html
@@ -0,0 +1,176 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-panels" attributes="transition, selected, index" 
+         handlers="keydown: keydownHandler">
+<link rel="components" href="g-component.html">
+<link rel="components" href="panel-transitions/g-panel-transition.html">
+<link rel="components" href="panel-transitions/g-keyframe-panel-transition.html">
+<link rel="components" href="panel-transitions/g-flow-panel-transition.html">
+<link rel="stylesheet" href="css/g-panels.css" />
+<template>
+	<content id="content" select="*"></content>
+</template>
+<script>
+  // TODO(sorvell): promote this and figure out canonical way to do this;
+  // and support contenteditable.
+  var documentIsEditing = function() {
+    var a = document.activeElement;
+    if (a.tagName == "INPUT" || a.tagName == "SELECT" || a.tagName == "TEXTAREA") {
+      return true;
+    }
+  }
+  
+  this.component({
+    created: function() {
+      this.initPanels();
+      if (!this.index) {
+        this.index = 0;
+      }
+    },
+    prototype: {
+      tabIndex: -1,
+      defaultTransition: 'keyframe',
+      initPanels: function() {
+        this.getPanels().forEach(function(p, i) {
+          this.initPanel(p, i);
+        }, this);
+      },
+      initPanel: function() {},
+      indexChanged: function(inOldValue) {
+        var i = this.clampIndex(this.index);
+        var old = this.clampIndex(inOldValue);
+        if (i != this.index) {
+          this.index = i;
+          return;
+        }
+        if (this.index != old) {
+          this.lastIndex = old;
+          var fromPanel = this.panelAtIndex(this.lastIndex), 
+              toPanel = this.panelAtIndex(this.index),
+              forward = Boolean(this.index > this.lastIndex);
+          if (this.canTransition()) {
+            this.beginTransition(fromPanel, toPanel, forward);
+          } else {
+            this.finishTransition(fromPanel, toPanel, forward);
+          }
+        }
+      },
+      clampIndex: function(inIndex) {
+        return Math.max(0, Math.min(this.count-1, inIndex));
+      },
+      // selected is a virtual property so override getter
+      get selected() {
+        var selected = this.getSelectedPanel();
+        var name = selected && selected.getAttribute('name');
+        return name || this.index;
+      },
+      // selected is the name property of the panel to select
+      selectedChanged: function(inOldValue) {
+        var index = this.indexOfName(this.selected);
+        if (index >= 0) {
+          this.index = index;
+        }
+      },
+      transitionChanged: function(inOldValue) {
+        if (this.transitionNode) {
+          this.transitionNode.teardown();
+        }
+        this.transitionNode = this.makeTransitionNode(this.transition);
+        this.transitionNode.setup(this);
+        this.setAttribute('transition', this.transition);
+      },
+      makeTransitionNode: function(inName) {
+        var name = this.tagNameForTransition(inName);
+        var transition = document.createElement(name);
+        return transition.setup ? transition : 
+            this.makeTransitionNode(this.defaultTransition);
+      },
+      tagNameForTransition: function(inName) {
+        return "g-" + inName + (inName ? "-" : "") + "panel-transition";
+      },
+      // TODO: consider selecting something more specific so we don't need to
+      // filter out style/templates children.
+      getPanels: function() {
+        var n$ = this.$.content.getDistributedNodes();
+        return Array.prototype.filter.call(n$, function(c) {
+          return c.tagName != "STYLE" && c.tagName != "TEMPLATE";
+        });
+      },
+      getSelectedPanel: function() {
+        return this.getPanels()[this.index];
+      },
+      indexOfName: function(inName) {
+        var c$ = this.getPanels();
+        for (var i=0, c; c=c$[i]; i++) {
+          if (c.getAttribute("name") == inName) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      indexOf: function(inPanel) {
+        return this.getPanels().indexOf(inPanel);
+      },
+      panelAtIndex: function(inIndex) {
+        return this.getPanels()[inIndex];
+      },
+      panelAtName: function(inName) {
+        return this.panelAtIndex(this.indexOfName(inName));
+      },
+      get count() {
+        return this.getPanels().length;
+      },
+      canTransition: function() {
+        return Boolean(this.transitionNode);
+      },
+      beginTransition: function(inFrom, inTo, inForward) {
+        var old = this.transitionInfo;
+        if (old && this.transitionNode) {
+          this.transitionNode.stop();
+        }
+        this.transitionInfo = {from: inFrom, to: inTo, forward: inForward};
+        webkitRequestAnimationFrame(function() {
+          inFrom.hidden = false;
+          inTo.hidden = false;
+          this.transitionNode.go(inFrom, inTo, inForward);
+        }.bind(this));
+      },
+      finishTransition: function() {
+        this.transitionInfo = null;
+        if (this.transitionNode && this.transitionNode.highlander) {
+          this.getPanels().forEach(function(p, i) {
+            p.hidden = (i != this.index);
+          }, this);
+        }
+      },
+      next: function() {
+        this.index++;
+      },
+      previous: function() {
+        this.index--;
+      },
+      keydownHandler: function(e) {
+        if (documentIsEditing()) {
+          return;
+        }
+        var i = this.index;
+        // right arrow
+        if (e.keyCode == 39) {
+          this.next();
+        // left arrow
+        } else if (e.keyCode == 37) {
+          this.previous();
+        }
+        if (i != this.index) {
+          e.stopPropagation();
+        }
+      }
+    }
+  });
+</script>
+</element>
\ No newline at end of file
diff --git a/src/panel-transitions/g-flow-panel-transition.html b/src/panel-transitions/g-flow-panel-transition.html
new file mode 100644
index 0000000000..e0d9d2dd8c
--- /dev/null
+++ b/src/panel-transitions/g-flow-panel-transition.html
@@ -0,0 +1,113 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-flow-panel-transition" extends="g-panel-transition">
+  <template>
+    <style scoped>
+      x-flowpanels > .right {
+        left: auto;
+        right: 0;
+      }
+
+      @media screen and (max-width: 800px) {
+        x-flowpanels > * {
+          width: 100% !important;
+          -webkit-box-shadow: none !important;
+        }
+      }
+    </style>
+  </template>
+  <script>
+    this.component({
+      shadowRootCreated: function(inRoot) {
+        this.sheet = inRoot.querySelector("style");
+      },
+      prototype: {
+        highlander: false,
+        narrowMedia: '(max-width: 800px)',
+        setup: function(inPanels) {
+          this.base.setup.call(this, inPanels);
+          this.listenForMediaMatch();
+          this.panels.appendChild(this.sheet);
+        },
+        teardown: function() {
+          this.base.teardown.call(this);
+          this.panels.removeChild(this.sheet);
+        },
+        listenForMediaMatch: function() {
+          var mq = window.matchMedia(this.narrowMedia);
+          this.narrowLayout = mq.matches;
+          mq.addListener(this.layoutChange.bind(this));
+          this.layoutChange(mq);
+        },
+        layoutChange: function(inQuery) {
+          this.narrowLayout = inQuery.matches;
+          this.refresh();
+        },
+        enableTransitions: function(inEnable) {
+          this.panels.getPanels().forEach(function(p) {
+            p.style.webkitTransition = inEnable ? null : 'none';
+          });
+        },
+        refresh: function() {
+          this.enableTransitions(false);
+          this.go(null, this.panels.getSelectedPanel());
+          webkitRequestAnimationFrame(function() {
+            this.enableTransitions(true);
+          }.bind(this));
+        },
+        begin: function() {
+          var i = this.panels.indexOf(this.to);
+          if (this.panelIsRightAligned(this.to)) {
+            this.applyRightLayout(this.to, i);
+          } else {
+            this.applyLeftLayout(this.to, i);
+          }
+        },
+        // inIndex appears at the left with subsequent nodes
+        // moved out of the way to the right; right aligned nodes are ignored
+        applyLeftLayout: function(inTo, inIndex) {
+          var l, count = this.count;
+          this.panels.getPanels().forEach(function(p, i) {
+            var x = !l ? 0 : (this.narrowLayout ? (i - inIndex) * 100 + 
+              '%' : l.offsetWidth + 'px');
+            var right = this.panelIsRightAligned(p);
+            p.style.zIndex = right ? -i : null;
+            p.style.webkitTransform = 'translate3d(' + (right ? 0 : x) + ',0,0)';
+            if (i >= inIndex) {
+              l = p;
+            }
+          }, this);
+        },
+        // inIndex appears at the right with previous nodes
+        // moved out of the way to the left; note z-index used to get proper stacking
+        applyRightLayout: function(inTo, inIndex) {
+          var p$ = this.panels.getPanels(), right=true, l;
+          for (var i=p$.length-1, p; p=p$[i]; i--) {
+            var x = l ? -l.offsetWidth : 0;
+            p.style.zIndex = right ? p$.length - i : null;
+            p.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
+            if (i <= inIndex) {
+              l = p;
+            }
+            // record where we stop being right aligned so we can stop z-stacking
+            right = right && this.panelIsRightAligned(p);
+          }
+        },
+        // TODO(sorvell): it's unsatisfying that we need a specific class to 
+        // determine right alignment because this defeats applying rightness via
+        // selectors (e.g. :last-child or media queries). We could look for 
+        // computed style right == 0 but this seems more brittle.
+        panelIsRightAligned: function(inNode) {
+          return !this.panels.narrowLayout && inNode &&
+              inNode.classList.contains('right');
+        }
+      }
+    });
+  </script>
+</element>
+
diff --git a/src/panel-transitions/g-keyframe-panel-transition.html b/src/panel-transitions/g-keyframe-panel-transition.html
new file mode 100644
index 0000000000..2f4d44f4ff
--- /dev/null
+++ b/src/panel-transitions/g-keyframe-panel-transition.html
@@ -0,0 +1,39 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-keyframe-panel-transition" extends="g-panel-transition">
+  <script>
+    var END_EVENT = 'webkitAnimationEnd';
+    
+    this.component({
+      prototype: {
+        transitionClass: 'animate',
+        setup: function(inPanels) {
+          this.base.setup.call(this, inPanels);
+          this.panels.addEventListener(END_EVENT, this.finishListener);
+        },
+        teardown: function() {
+          this.base.teardown.call(this);
+          this.panels.removeEventListener(END_EVENT, this.finishListener);
+        },
+        begin: function() {
+          this.from.classList.add(this.forward ? 'panels-ascending-from' :
+              'panels-descending-from');
+          this.to.classList.add(this.forward ? 'panels-ascending-to' :
+              'panels-descending-to');
+        },
+        complete: function() {
+          this.from.classList.remove('panels-ascending-from', 
+              'panels-descending-from');
+          this.to.classList.remove('panels-ascending-to', 
+              'panels-descending-to');
+        }
+      }
+    });
+  </script>
+</element>
+
diff --git a/src/panel-transitions/g-panel-transition.html b/src/panel-transitions/g-panel-transition.html
new file mode 100644
index 0000000000..8c03373c9a
--- /dev/null
+++ b/src/panel-transitions/g-panel-transition.html
@@ -0,0 +1,67 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-panel-transition">
+  <script>
+    this.component({
+      prototype: {
+        transitionClass: 'transition',
+        timeout: 1000,
+        //* indicates only one panel should be displayed at a time.
+        highlander: true,
+        // TODO(sorvell): promote to g-component?
+        get base() {
+          return this.__proto__.__proto__;
+        },
+        setup: function(inPanels) {
+          this.panels = inPanels;
+          inPanels.getPanels().forEach(function(p, i) {
+            p.classList.add(this.transitionClass);
+            p.hidden = this.highlander && (i != inPanels.index);
+          }, this);
+          this.finishListener = this.finish.bind(this);
+        },
+        teardown: function() {
+          this.panels.getPanels().forEach(function(p, i) {
+            p.classList.remove(this.transitionClass);  
+            p.style.opacity = p.style.webkitTransform = null;
+            if (this.highlander) {
+              p.hidden = false;
+            };
+          }, this);
+        },
+        go: function(inFrom, inTo, inForward) {
+          this.from = inFrom;
+          this.to = inTo;
+          this.forward = inForward;
+          this._transitioning = setTimeout(this.finishListener, this.timeout);
+          this.begin(inFrom, inTo, inForward);
+        },
+        finish: function() {
+          if (this._transitioning) {
+            this.complete(); 
+          }
+          this.cancel();
+          this.panels.finishTransition();
+        },
+        cancel: function() {
+          clearTimeout(this._transitioning);
+          this._transitioning = null;
+        },
+        stop: function() {
+          this.finish();
+        },
+        // transitions typically override begin/complete
+        begin: function() {
+        },
+        complete: function() {
+        }
+      }
+    });
+  </script>
+</element>
+
diff --git a/workbench/panels.html b/workbench/panels.html
new file mode 100644
index 0000000000..8678f43ee2
--- /dev/null
+++ b/workbench/panels.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Panels</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shadow="webkit"></script>
+  <link rel="components" href="../src/g-panels.html">
+  <link rel="stylesheet" href="../src/css/g-panels.css" />
+	<style>
+		html, body {
+			height: 100%;
+			margin: 0;
+			background: whitesmoke;
+		}
+
+		body {
+			display: -webkit-flex;
+			-webkit-flex-flow: column;
+      opacity: 0;
+		}
+
+		.controls {
+			padding: 10px;
+		}
+		
+		g-panels {
+      counter-reset: section;
+			-webkit-flex: 1;
+			outline: none;
+			border: 1px solid #ccc;
+			position: relative;
+			overflow: hidden;
+			font-size: 30px;
+		}
+    
+		g-panels > * {
+			padding: 10px;
+		}
+    
+    g-panels[transition="flow"] > * {
+      width: 80%;
+      -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5);
+    }
+	</style>
+</head>
+<body>
+  <div class="controls">
+		<button onclick="previous();">&laquo;</button>
+		<button onclick="next();">&raquo;</button>
+		<select onchange="changeTransition(event)">
+			<option  selected>fade</option>
+			<option value="keyframe">hslide</option>
+			<option value="keyframe">vslide</option>
+			<option value="keyframe">hslideover</option>
+			<option value="keyframe">vslideover</option>
+			<option value="keyframe">explode</option>
+      <option value="keyframe">scale-slide</option>
+      <option value="keyframe">fly-up-right</option>
+      <option value="flow">flow</option>
+		</select>
+	</div>	
+  <g-panels index="2" transition="keyframe" class="g-panels-fade">
+		<section name="foo" style="background: blue;">Panel 1</section>
+		<section name="zonk" style="background: red;">Panel 2</section>
+		<section name="bar" style="background: yellow;">Panel 3</section>
+		<section name="zing" style="background: black; color: white">Panel 4</section>
+		<section name="baz" style="background: white;">Panel 5</section>
+	</g-panels>
+<script>
+	document.addEventListener("WebComponentsReady", function() {
+		document.body.style.opacity = 1;
+    
+    var panels = document.querySelector("g-panels");
+		next = function() {
+			panels.next();
+		}
+		previous = function() {
+			panels.previous();
+		}
+
+		changeTransition = function(e) {
+      panels.transition = e.target.value;
+      var selectedOption = e.target.selectedOptions[0];
+      var className = selectedOption ? selectedOption.textContent : '';
+      panels.className = 'g-panels-' + className;
+      panels.focus();
+		}
+
+    panels.focus();
+	});
+</script>
+
+</body>
+</html>