Kenburns

Summary

Kenburns is an open source Jquery Plugin that uses CSS3 transitions to create stylized pan-and-zoom gallery slide transitions. The plugin chooses a target corner of the next slide and scales and zooms an image to reach it. When the slide transition completes, the plugin dispatches an event. Events can be bound to trigger things like copy and description changes.

Challenge

I wanted the gallery transitions to choose a different target corner at each transition, so as to keep the transitions dynamic. Additionally, I wanted the opacity value transition to occur at a different rate from the pan and zoom transition. The gallery needed to load the images asynchronously, in parallel, and maintain the order in which the user described.

Result

To keep the transitions fresh, I treated each corner as an object and stored them in an array. Prior to making a transition, the gallery removes the present and the previous corner as options. Then it selects using a random integer. Each slide is wrapped in an element. I used CSS3 3d transforms on the outer slide element to force hardware acceleration, and applied the opacity transition to the inner image. The gallery starts loading the images in parallel, and once loaded the gallery logic shuffles them into the correct order. It starts playing as soon as the first image is loaded, but pauses if it encounters an image that has not yet loaded.