Create a Photo Stack Effect with Pure CSS Animations or MooTools

David Walsh

7 years ago

My favorite technological piece of Google Plus is its image upload and display handling. You can drag the images from your OS right into a browser’s DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them. Outstanding! I’ve researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript.

These styles act as a base to the CSS and MooTools methods of animation.

The CSS Version

Both the CSS-only and MooTools versions will rely on browser-provided CSS3 animations via transforms. The transforms we’ll be using are rotate, translate, and scale. The scale will be kept relatively small so that the magnification isn’t abrupt.

The first step is getting our @-keyframes properties set up so that we can use the animations later. The following CSS assumes there will be 3 photos and user Google’s animation values:

The :hover state signals showtime, and the animation is wonderful. You’ll see that I’ve duplicated the 100% setting within the :hover state as well, and that ensures the elements stay at their destination transformation after the animation is playing (otherwise the elements would abruptly revert to original state one the animation was done playing).

While this animation looks great, and requires no JavaScript, the abruptness in return to original state is slightly off-putting. Time for some MooTools magic.

UPDATE: CSS Transitions FTW

Using CSS transitions instead of animations, we can create a complete CSS-only solution!

The MooTools Version

Since there was no method for animating each image to its original position with just CSS, and considering MooTools has the smoothest animations on the web, it was only natural that I use MooTools to complete the effect. JavaScript is also nice in that we can do variable animations based on developer configuration and variable numbers of images.

After creating an initial inline-script, I refactored what I had to provide the following MooTools JavaScript class:

There can be a lot of math involved with allowing for a variable number of images, so to ease the burden of those calculations, I’ve placed “max” options within the class to manage those calculations for the developer. Using the class is as simple as:

Duplicating Google’s photo stack effect was much easier than I had expected it to be thanks to MooTools’ flexible, easy to use Fx class. If you aren’t worried about animating back to original position, you can stick to the simple CSS solution. You can’t lose with either effect; they’re both very smooth and add a subtle touch of class to an otherwise dull photo display.

If you’re looking for a jQuery alternative, this method appears to be close to mine.