Using offline techniques to create online effects

Sometimes the best way to create great online effects is to go offline. Recently I needed to create an organic pagination effect for PUMA's Time Summer Contest. Since the individual items were designed to look like Polaroids (instant film) we wanted the pagination between sets to look like someone was swiping the pictures off the page. This was a really interesting challenge, but I had no idea where to start. Creating the subtle randomness that makes something feel natural is very difficult in the digital world.

Starting in the real world

After thinking it through I was struck that the solution (or at least the start of it) was actually very simple: in order to figure out how twelve Polaroids would react to getting swiped off a surface I had to actually do it! I recruited Blair (the designer on this project) to be my assistant and arm model. We cut up and numbered twelve pieces of paper and arranged them on a table roughly matching the layout in the design. I then stood on a ladder above and shot video on my phone, while Blair swiped the pieces of paper off the table. After a couple of tries we got a good segment to work with.

I took this back to my desk and created a very simple animated gif of the video in Fireworks. By drawing boxes over each real-world piece of paper every few frames I was able to track the approximate movement of each element.

What I was looking for was the interesting and unexpected things that happen during this kind of interaction that would be difficult or impossible to think up. What I found was that, instead of one element bumping into the next, each column of elements slid under and over the next column before the movement started. On top of that, there was a plethora of small shifts and angle changes.

Programming the organic

The next step was to translate the movement into CSS keyframe animation. Like an old-school cell animator I reproduced, as accurately as possible, the movements in the animated GIF. This required creating unique animations for each of the twelve elements. After lots of trial and error, then some refinements, I arrived at a great-looking reproduction of the video (sorry, this demo is only prefixed for Safari and Chrome).

http://jsfiddle.net/ten1seven/p9PwU/2/

Then the horror set in...

After a small desk celebration, it dawned on me that reproducing this effect by hand three more times (in left, out right and in right) was going to be tedious as well as create a lot of bloated and unmaintainable code. I needed to figure out how to capture the essence of what I learned into an engine that could run the animation in any direction.

In my final solution, I wound up converting the keyframe animation into simple transitions so that I could assign different effects on the fly. All of the elements in each column start out with a basic position transition sending them off the "stage" or back on. A transition-delay creates the effect of one column sliding over the next as they all slide out/in.

The additional magic is through randomly generated classes. At the moment the pagination button is clicked, each element is assigned (via JavaScript) a class that gives it a random angle and another class that gives it a random margin offset. This gives each element unpredictable and organic movement as it moves in or out of view. With this system, no two pagination transitions are ever the same and the code is more compact and maintainable.

The result was a unique effect at the end of a really fun process. Have you gotten to create an interesting effect in a unique way? Let's hear about it!