Add "Bringing Designs to Life" section to state transitions guide (#1043)

Author: chrisvfritz

src/v2/guide/transitioning-state.md

@@ -140,11 +140,11 @@ new Vue({
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween(this.tweenedColor)
         .to(this.color, 750)
         .start()
-      
+
       animate()
     }
   },
@@ -216,11 +216,11 @@ new Vue({
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween(this.tweenedColor)
         .to(this.color, 750)
         .start()
-      
+
       animate()
     }
   },
@@ -442,14 +442,14 @@ Vue.component('animated-integer', {
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween({ tweeningValue: startValue })
         .to({ tweeningValue: endValue }, 500)
         .onUpdate(function () {
           vm.tweeningValue = this.tweeningValue.toFixed(0)
         })
         .start()
-      
+
       animate()
     }
   }
@@ -512,14 +512,14 @@ Vue.component('animated-integer', {
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween({ tweeningValue: startValue })
         .to({ tweeningValue: endValue }, 500)
         .onUpdate(function () {
           vm.tweeningValue = this.tweeningValue.toFixed(0)
         })
         .start()
-      
+
       animate()
     }
   }
@@ -540,3 +540,16 @@ new Vue({
 {% endraw %}
 
 Within child components, we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions.html). Together, there are very few limits to what can be accomplished.
+
+## Bringing Designs to Life
+
+To animate, by one definition, means to bring to life. Unfortunately, when designers create icons, logos, and mascots, they're usually delivered as images or static SVGs. So although GitHub's octocat, Twitter's bird, and many other logos resemble living creatures, they don't really seem alive.
+
+Vue can help. Since SVGs are just data, we only need examples of what these creatures look like when excited, thinking, or alarmed. Then Vue can help transition between these states, making your welcome pages, loading indicators, and notifications more emotionally compelling.
+
+Sarah Drasner demonstrates this in the demo below, using a combination of timed and interactivity-driven state changes:
+
+<p data-height="265" data-theme-id="light" data-slug-hash="YZBGNp" data-default-tab="result" data-user="sdras" data-embed-version="2" data-pen-title="Vue-controlled Wall-E" class="codepen">See the Pen <a href="https://codepen.io/sdras/pen/YZBGNp/">Vue-controlled Wall-E</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+