How was it done? Interactive "Before and After" photo with slider

I saw this interactive graphic on a US government website (FDA). It shows a "before and after" version of an edited photo (picture of a retail counter, with "old" and "new" signage). The reader uses a little slider control that appears in the middle of the photo, and slides from one side to the other to see the "before" and "after" version. The slider button can also be controlled by keyboard letters (A and D), which nudge the button left or right. 

Can anyone explain how this was done? Is there a template for this?

Here is the website where it appeared.... 

Many thanks as usual to this well-informed group!


16 Replies
Robert Kennedy

Not sure how it was done exactly but that's javascripting and image layers.  I don't know how to translate that to Articulate other than finding out the specific javascipt package, coding it for your images and then web-object it to your Articulate page.  Other than that, you are looking at creating a flash movie to insert.  I'll look a little further later on.


Montse Anderson

Great example, Bryan!

Playing around a bit with the Wipe animation and Presenter's seek bar, I came up with this little idea:

PowerPoint Image Slider

The main thing is to set the duration of the slide to something like 30 seconds and use With Previous so the file auto-plays.

PowerPoint  file

Joanne Lazzaro

Thank s y'all for such an interesting discussion! Didn't realize I would stir up so much interest....

Bryan Jones, I was not able to access the dropbox link you posted in your comment (might be blocked by our corporate security), so yes, I would like to see a Screenr version, when you have the time (Screenr is OK, so far). Thank you!


James Brown

I thought I would take a power point approach with a semi controllable slider. I wanted to see if I could control the wipe effect with an activeX object such as the text box slider but I couldn't come up with the VBA script. Anyway this was just something I came up with. It has the power point flaw of not reloading the custom animation if you click back and fourth in the slide show but I wanted to give you just another idea on how to accomplish the before and after effect without anything else. BTW - Flash actually has a slider component and what I would have done is created a mask and used the slider to apply or turn off the mask. Not sure if you can do this within articulate but since the finish product is Flash I think it may be possible without using Javascript.