Segue slides animate on ever slide enter

4 files changed, 196 insertions, 106 deletions

diff --git a/js/slides.js b/js/slides.js
index dab51f9..e48924c 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -64,24 +64,42 @@ SlideDeck.prototype.addEventListeners_ = function() {
                             false);
   window.addEventListener('popstate', this.handlePopState_.bind(this), false);
 
-  // Google Developer icon gray bar should reanimate on every slide enter.
+  // Google Developer icon gray bar and segue slide titles should reanimate on
+  // every slide enter.
   var gbars = document.querySelectorAll('slide > .gdbar');
   for (var i = 0, gbar; gbar = gbars[i]; ++i) {
     var slide = gbar.parentElement;
+
     slide.addEventListener('slideenter', function(e) {
       this.buildNextItem_();
+      if (e.target.classList.contains('segue')) {
+        e.target.querySelector('hgroup').classList.add('on');
+      }
     }.bind(this), false);
+
     slide.addEventListener('slideleave', function(e) {
       var bar = e.target.querySelector('.gdbar');
       bar.classList.remove('build-current');
       bar.classList.add('to-build');
+      if (e.target.classList.contains('segue')) {
+        e.target.querySelector('hgroup').classList.remove('on');
+      }
     }, false);
   }
+
+  // document.addEventListener('webkitTransitionEnd', function(e) {
+  //   var el = e.target;
+  //   var property = e.propertyName;
+  //   if (el.classList.contains('gdbar') && property == 'background-size') {
+  //     console.log('done');
+  //     el.parentElement.parentElement.querySelector('article hgroup').classList.add('on');
+  //   }
+  // }, false);
 };
 
 /**
  * @private
- * @param {Event} e
+ * @param {Event} e The pop event.
  */
 SlideDeck.prototype.handlePopState_ = function(e) {
   if (e.state != null) {
diff --git a/template.html b/template.html
index 3ac5bf0..a69caae 100644
--- a/template.html
+++ b/template.html
@@ -148,10 +148,20 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide class="segue dark nobackground">
+    <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
+    <article class="flexbox vleft">
+      <hgroup>
+        <h2>Segue Slide</h2>
+        <h3>Subtitle Placeholder</h3>
+      </hgroup>
+    </article>
+  </slide>
+
   <slide class="thank-you-slide nobackground">
     <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
     <section class="flexbox vleft">
-      <h1>&lt;Thanks You!&gt;</h1>
+      <h2>&lt;Thanks You!&gt;</h2>
       <p>Important contact information goes here.</p>
     </section>
     <p>
diff --git a/theme/css/default.css b/theme/css/default.css
index 714af1c..c2022de 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -387,19 +387,23 @@ slides > slide.far-next {
   transform: translate3d(2040px, 0, 0);
 }
 /* line 168, ../sass/default.scss */
+slides > slide.dark {
+  background: #515151;
+}
+/* line 172, ../sass/default.scss */
 slides > slide hgroup + article {
   margin-top: 1.5em;
 }
-/* line 172, ../sass/default.scss */
+/* line 176, ../sass/default.scss */
 slides > slide > article {
   margin-top: 2em;
 }
-/* line 175, ../sass/default.scss */
+/* line 179, ../sass/default.scss */
 slides > slide > article p {
   margin-bottom: 1em;
 }
 
-/* line 186, ../sass/default.scss */
+/* line 190, ../sass/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
@@ -414,7 +418,7 @@ slides.layout-faux-widescreen > slide.far-past {
   -ms-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }
-/* line 192, ../sass/default.scss */
+/* line 196, ../sass/default.scss */
 slides.layout-widescreen > slide.past,
 slides.layout-faux-widescreen > slide.past {
   display: block;
@@ -429,7 +433,7 @@ slides.layout-faux-widescreen > slide.past {
   -ms-transform: translate3d(-1130px, 0, 0);
   transform: translate3d(-1130px, 0, 0);
 }
-/* line 198, ../sass/default.scss */
+/* line 202, ../sass/default.scss */
 slides.layout-widescreen > slide.current,
 slides.layout-faux-widescreen > slide.current {
   display: block;
@@ -444,7 +448,7 @@ slides.layout-faux-widescreen > slide.current {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-/* line 204, ../sass/default.scss */
+/* line 208, ../sass/default.scss */
 slides.layout-widescreen > slide.next,
 slides.layout-faux-widescreen > slide.next {
   display: block;
@@ -459,7 +463,7 @@ slides.layout-faux-widescreen > slide.next {
   -ms-transform: translate3d(1130px, 0, 0);
   transform: translate3d(1130px, 0, 0);
 }
-/* line 210, ../sass/default.scss */
+/* line 214, ../sass/default.scss */
 slides.layout-widescreen > slide.far-next,
 slides.layout-faux-widescreen > slide.far-next {
   display: block;
@@ -475,30 +479,30 @@ slides.layout-faux-widescreen > slide.far-next {
   transform: translate3d(2260px, 0, 0);
 }
 
-/* line 217, ../sass/default.scss */
+/* line 221, ../sass/default.scss */
 b {
   font-weight: 600;
 }
 
-/* line 221, ../sass/default.scss */
+/* line 225, ../sass/default.scss */
 a {
   color: #0066cc;
 }
-/* line 224, ../sass/default.scss */
+/* line 228, ../sass/default.scss */
 a:visited {
   color: rgba(0, 102, 204, 0.75);
 }
-/* line 228, ../sass/default.scss */
+/* line 232, ../sass/default.scss */
 a:hover {
   color: black;
 }
 
-/* line 233, ../sass/default.scss */
+/* line 237, ../sass/default.scss */
 h1, h2, h3 {
   font-weight: 600;
 }
 
-/* line 237, ../sass/default.scss */
+/* line 241, ../sass/default.scss */
 h2 {
   font-size: 45px;
   line-height: 45px;
@@ -506,7 +510,7 @@ h2 {
   color: #515151;
 }
 
-/* line 244, ../sass/default.scss */
+/* line 248, ../sass/default.scss */
 h3 {
   font-size: 30px;
   letter-spacing: -1px;
@@ -515,38 +519,38 @@ h3 {
   color: #797979;
 }
 
-/* line 252, ../sass/default.scss */
+/* line 256, ../sass/default.scss */
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
 }
-/* line 256, ../sass/default.scss */
+/* line 260, ../sass/default.scss */