This week’s challenge is to create an interaction that lets the user explore a before-and-after visual comparison. The serious nature of the examples told me I should add something of importance to the visual conversation.
The idea is that coffee cakes must get baked, and that someone needs to shine the light of understanding on their brave journey.
For the cake, I grabbed two photos: One of an unbaked coffee cake, and one of a baked coffee cake. I added states to the unbaked image that took it from 0% transparency at the beginning of my timeline to 100% transparency at the end. I placed the baked image underneath and left it at 0% transparency.
I used 20 states, some of which you can see here, and named each state for the percentage of transparency I’d applied.
To allow control of the interaction I used a slider to represent the length of the baking time, using a kitchen timer as the thumb image and an on-screen indicator to show elapsed minutes. To add a bit more interest I added the tick-tock of a kitchen timer that lasts as long as baking is in progress, and the ding of the timer once the cake is done.
Now We Just Need Coffee!
Ready to make cake happen? You can give it a go right here.