RaphaelJS animation

raphael.js

$(window).load(function() {
  
  // config
  var cyan          = "#009fee";
  var white         = "#ffffff";
  var paperCenterX  = $(window).width() / 2;
  
  // timings
  var lineFadeInTime        = 2000;
  var whiteGFadeInTime      = 2000;
  var lineStandTime         = 1000;
  var lineFadeOutTime       = 2000;
  var foregroundFadeOutTime = 4000;
  var blueGStandTime        = 2000;
  var blueGFadeOutTime      = 1000;
  
  // set up the elements
  var paper     = Raphael(document.getElementById('raphael-container'), "100%", "100%");
  var dim = navigator.userAgent.match(/MSIE (6|7)/) ? [$(window).width(), $(window).height()] : ["100%", "100%"];
  var cyanBg    = paper.rect(0, 0, dim[0], dim[1]).attr({fill: cyan, stroke: cyan});
  var blueG     = paper.image("/images/home/g_blue.png", paperCenterX - 226/2, 150, 226, 296).attr({href: _newsPageUrl()});
  var whiteG    = paper.image("/images/home/g_white.png", paperCenterX - 226/2, 150, 226, 296).attr({opacity: 0, href: _newsPageUrl()});
  var whiteLine = _drawWhiteLine();


  // animation
  // fade in white line 
  whiteLine.animate({opacity: 1}, lineFadeInTime, "linear", function() {
    setTimeout(
      // fade in white g
      whiteG.animate({opacity: 1}, whiteGFadeInTime, "<", function() {
        whiteLine.animate({opacity: 0}, lineFadeOutTime, "linear", function() {
          var foreground = paper.set().push(cyanBg, whiteG);
          // crossfade blue to white screen
          foreground.animate({opacity: 0}, foregroundFadeOutTime, ">", function() {
            setTimeout(function() {
              // fade out blue g
              blueG.animate({opacity: 0}, blueGFadeOutTime, ">", function() {
                _goToNewsPage();
              });              
            }, blueGStandTime);
          });
        });
      }), lineStandTime);
  });
  
  
  // helper methods
  function _goToNewsPage() {
    location.href = _newsPageUrl();
  }
  
  function _drawWhiteLine() {
    var x0 = x1 = paperCenterX + (226/2) - 16;
    var y0 = y1 = 0;
    var y1 = $(window).height();
    return paper.path(_path(x0, y0, x1, y1)).attr({stroke: white, opacity: 0, "stroke-width": 2});
  }
  
  function _path(x0, y0, x1, y1) {
    return "M" + x0 + " " + y0 + " L" + x1 + " " + y1;
  }
  
  function _newsPageUrl() {
    var slash = location.href.match(/.+\/$/) ? "" : "/";
    return location.href + slash + "news";
  }
});