Polaroid Photo Stack with Animation

This "Show me code or it didn't happen" features the rotated photo stack and its animation as seen at Nachbarschaftsauto or in this video.

Right from the first time we discussed the idea to show featured cars in a polaroid photo stack with flipping animations I fell for it. This gently rotated stack reminded me on a project I've worked before where we represented photo-albums and folders with a pile of pictures. I always liked this way of represent content. But looking for such a jQuery plugin I couldn't find anything that was half-way decent looking nor programmed well. Most snippest were made for photo-albums and didn't work on div-elements or did some really bad canvas-hacking to rotate things, making it impossible to animate it nicely nor include links in the code.

So I took the only thing I could do: take the one that looks best, read the code and write it yourself. As most of them, this one wasn't using the latest technology nor was it backwards-compatible, but at least it had some rotation and the animation in a way I wanted it to be. Lucky me, I had a designer to my left, helping me out with the Polaroid and stuff. Most of that is very straight forward. But there are few pitfalls, which took me one hour or the other to figure out. This article is about those insights we've won working on this particular part of the project.

Understanding the Nachbarschaftsauto Redesign

Recently, we've relaunched the main page of Nachbarschaftsauto. While the obvious benefit is that it looks better it is also an adaption to the change in the way people use the site. This articles will give you some insights on the structural designs decisions we took for the new design and reason why we went there. There is going to be another article going into the technical details of this awesome polaroid stack animation and the pitfalls we had to get around later this month. Now, let's take a look at the design from a user interface and design perspective.