@40.416563,-3.700351 Madrid

jQuery.growShrink

A jQuery experiment to "grow" and "shrink" things using CSS3 transforms. Perfect for replicating Apple's Quick Look effect.

Previous experiment

It's very common in jQuery plugins to use animations to "grow" some element by iterating over the element's width and height CSS properties. This has one big drawback: it's very slow. For every tick in the animation, the change in the width/height property triggers a content reflow and a subsequent rendering. Moreover, we don't give the browser a chance to use hardware acceleration.

There is an alternative though: when using CSS transforms the content is not re-flown and rendered, and the browser can use its hardware accelerated capabilities to show the transformation. This is because the source DOM is not altered, and a change in the transform properties does not trigger a re-flow of the text elements.

Interactive Example

The following is an interactive example of the transform function in action. Move the slider to show the animation steps. Look carefully at the #target element, it's not sized or moved using the usual properties (top, left, width, height from css) but uses the browser transform functions. Its contents remain selectable and functional.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 

Move me! I'm an interactive chart!

A real life example

Pictures © Allan Reyes, by the way, why don't you look at his Argonship webpage for more pictures like this. :-)

This is a real life example, using a simple "lightbox" effect. The full pictures are wrapped in an absolute positioned div with the following markup and CSS:

<!-- Markup for the picture viewer -->
<div id="picture1" class="picture_viewer">
    <img src="/full_size_image.jpg" width="640" height="427" />
    <p><a class="grow_close" href="#">Close window</a></p>
</div>

<!-- Base CSS for the picture viewer -->
.picture_viewer {
    width: 640px;
    height: 447px;
    background: white;
    padding: 10px;
    position: absolute;
    display: none;
    z-index: 5;

    -moz-box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5);
}

Ok, so far so good. This is a pretty standard absolute positioned layer for pictures. Then, for the clicks that triggers the action, I've used the usual <href=...> friend with an inline img, and then I've applied the following jQuery:

$(".pictures a").click(function(){
    var popit = $("#" + $(this).attr("href")).center();
    popit.data("source", $(this) ).growFrom($(this));
    return false;
});

$(".grow_close, .picture_viewer").click(function(){
    var popit = $(this).closest("div");
    popit.shrinkTo( popit.data("source"), {
        complete: function() {
            popit.hide();
        }
    });
    return false;
});

And thats it! Nothing super complicated here. See how growFrom and shrinkTo are used to animate the corresponding picture layer.