i am dustin diaz

Re: Gmail: A Behind the Scenes Video

In response to the GMail Behind the scenes video (see official GMail Blog for more details), my co-worker Lindsey and I decided to add our 10 second clip to the rest in hopes that ours will be considered for the final collaborative masterpiece. Only after quite a few trial and error attempts were we able to pull it off since it involved taking the Gmail M-velop (entering from the left) and dropping it into the computer monitor; only then to swipe it away off the screen (exit right). With a little help from YUI's Animation utility, it was rather simple as such:

YUI Animation M-velope

YAHOO.util.Event.onDOMReady(function() {

  var h = YAHOO.util.Dom.getViewportHeight() - 1; // subtract a pixel so we don't get scrollbar

  var w = YAHOO.util.Dom.getViewportWidth()  + 590; // add width of M-velope

  function f (e) {

    var Anim = new YAHOO.util.Motion('envelope', {

        points: {

          by: [0, h]

        }

      },

      0.75,

      YAHOO.util.Easing.bounceOut

    );

    Anim.onComplete.subscribe(function() {

      window.setTimeout(again, 1000);

    });

    Anim.animate();

    function again (e) {

      var Anim2 = new YAHOO.util.Motion('envelope', {

          points: {

            by: [w, 0]

          }

        },

        0.5,

        YAHOO.util.Easing.backIn

      );

      Anim2.animate();

    }

  }

  window.setTimeout(f, 200);

});

This essentially enabled us to produce this wonderful piece. Go ahead, have a look see here at our Youtube clip: Lindsey and Dustin pass the M-velope.

Nevertheless, I still find the Making of the M-velope drop much more entertaining. Cheers!