Using Toggles to Show Before & Afters

New Horizons spacecraft flying in front of title for toggle interaction

This week’s eLearning challenge was #100, Before & After: Showing Visual Comparisons in eLearning. I thought this challenge would be a great one to get my feet wet for the first time participating in challenges. The challenge was to create an interaction visually comparing two images. I decided to combine this with challenge #97, which looked for creative ways to use toggle or switches.

The Method

This challenge has numerous possibilities depending on the images that were used for the before & after. Rather than choosing a historical before and after shot, I chose to go with pictures of the same object, just taken with different technology.

I started the interaction by building a toggle switch- a rounded rectangle with two different states with the button on different sides. I replicated these two states on my pictures and the labels for each picture. Next, created a true/false variable set to false by default. Once I had my variable, I created a trigger so that when the toggle was clicked, the variable changed to the other value. The remaining triggers changed the state on the photos, labels, and toggle switch depending on the variable value. I also added a custom information button leading to another slide which goes into a bit more detail about the two different photos.

The Result

Click here to see the full interaction.


Leave your comment