+ Added a zoom animation using CSS transitions.

When you click on a page (both in zoomgroups and original)
  the page zooms to the foreground before the tab switch happens
  giving the appearance of having the tab zoom to life.
  Just after the switch the page resumes its normal size and
  position.

  It is so very pretty.

+ TODO: Add the reverse animation when switching back from
  a tab.

browser/base/content/tabcandy/app/groups.js

@@ -353,4 +353,32 @@ $(".tab").data('isDragging', false)
   .draggable(window.Groups.dragOptions)
   .droppable(window.Groups.dropOptions);
 
+$(".tab").click(function(){
+  // ZOOM!          
+  var [w,h] = [$(this).width(), $(this).height()];
+  var origPos = $(this).position();
+  var scale = window.innerWidth/w;
+  var fontSize = parseInt($(this).css("font-size"));
+  
+  $(this).addClass("scale-animate").css({
+    top: 0, left: 0,
+    width:w*scale, height:h*scale,
+    fontSize: fontSize*scale
+  }).bind("transitionend", function(e){
+    // We will get one of this events for every property CSS-animated...
+    // I choose one randomly (width) and only do things for that.
+    if( e.originalEvent.propertyName != "width" ) return;
+
+    // Switch tabs, and the re-size and re-position the animated
+    // tab image.
+    var self = this;
+    setTimeout(function(){
+      $(self)
+        .removeClass("scale-animate")
+        .css({top: origPos.top, left: origPos.left, width:w, height:h, fontSize:fontSize});
+    }, 500);
+    
+  })
+})
+
 })();

browser/base/content/tabcandy/app/ui.js

@@ -27,14 +27,35 @@ var Page = {
         $div.draggable(window.Groups.dragOptions);
         $div.droppable(window.Groups.dropOptions);
       }
-        
+              
       $div.mouseup(function(e){
         if( e.target.className == "close" ){
           $(this).find("canvas").data("link").tab.close(); }
         else {
-          if(!$(this).data('isDragging')) {
-            Navbar.show();
-            $(this).find("canvas").data("link").tab.focus();            
+          if(!$(this).data('isDragging')) {  
+            // ZOOM!          
+            var [w,h] = [$(this).width(), $(this).height()];
+            var origPos = $(this).position();
+            var scale = window.innerWidth/w;
+            
+            $(this).addClass("scale-animate").css({
+              top: 0, left: 0,
+              width:w*scale, height:h*scale
+            }).bind("transitionend", function(e){
+              // We will get one of this events for every property CSS-animated...
+              // I choose one randomly (width) and only do things for that.
+              if( e.originalEvent.propertyName != "width" ) return;
+
+              // Switch tabs, and the re-size and re-position the animated
+              // tab image.
+              $(this).find("canvas").data("link").tab.focus();
+              $(this)
+                .removeClass("scale-animate")
+                .css({top: origPos.top, left: origPos.left, width:w, height:h});
+              Navbar.show();
+            })
+            // END ZOOM
+            
           } else {
             $(this).find("canvas").data("link").tab.raw.pos = $(this).position();
           }

content/candies/original/index.html

@@ -115,6 +115,12 @@
     -moz-box-shadow: inset 2px 2px 12px rgba(0,0,0,.15);        
   }    
   
+  .scale-animate{
+    -moz-transition-property: height, width, left, top;
+    -moz-transition-duration: .17s;
+    -moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);        
+  }
+
    
   /* Resizable
   ----------------------------------*/

content/candies/zoomgroups/index.html

@@ -11,7 +11,14 @@
         font-size:250px;
         overflow:hidden; line-height:.5em;
         font-family: "Helvetica";
-        cursor: move;}
+        cursor: move;        
+      }
+      
+      .scale-animate{
+        -moz-transition-property: height, width, left, top, font-size;
+        -moz-transition-duration: .17s;
+        -moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);        
+      }
       
       .active{
         -moz-box-shadow: 5px 5px 4px rgba(0,0,0,.5);