<!doctype html>
<html>
  <head>
    <style type="text/css">
      body { height: 1500px; }
      #center {
         position: fixed;
         left: 40%;;
         width: 50%;
         height: 250px;
         top: 25%;
         background-color: grey;
         -webkit-transform: scale(0.25, 0.25);
         -webkit-transition: -webkit-transform 1s;
      }

      #drawer {
         position: fixed;
         top: 0;
         left: 0;
         height: 100%;
         width: 120px;
         background-color: red;
         -webkit-transform: translate3d(-1000px, 0, 0);
         -webkit-transition: -webkit-transform 1s;
      }

    </style>
    <script>
    'use strict';
    window.animationDone = false;
    window.addEventListener('load', function() {
      var centerEl = document.querySelector('#center');
      centerEl.style.webkitTransform = 'scale(1.0, 1.0)';
      console.time('Interaction.CenterAnimation/is_smooth');
      centerEl.addEventListener('transitionend', function() {
        console.timeEnd('Interaction.CenterAnimation/is_smooth');
        var drawerEl = document.querySelector('#drawer');
        drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)';
        console.time('Interaction.DrawerAnimation/is_smooth');
        drawerEl.addEventListener('transitionend', function() {
          console.timeEnd('Interaction.DrawerAnimation/is_smooth');
          window.animationDone = true;
        });
      });
    });
    </script>
  </head>
  <body>
    <div id="center">
      This is something in the middle.
    </div>
    <div id="drawer">
      This is a drawer.
    </div>
    <script>
    'use strict';
    var jankMs = 100;
    function jankThread() {
      console.time('Interaction.JankThreadJSRun/is_responsive');
      var startTime = window.performance.now();
      var currTime = startTime;
      while (currTime - startTime < jankMs) {
        var currTime = window.performance.now();
      }
      console.timeEnd('Interaction.JankThreadJSRun/is_responsive');
    }
    var drawer = document.getElementById('drawer');
    drawer.addEventListener('click', jankThread);
    </script>
  </body>
</html>