Before and after image slider through Javascript

May 03, 2021

Hi all, 

I've created a "before and after image" slider in Storyline by changing the state of the image. The way I did this is similar to this example, which is very complex and I'm looking for an alternative, probably with Javascript. 

How I created the original: the image that appears by moving the slider to the right is chopped up into pieces in different states and each state is connected to a part of the slider:

1. I've got about 67 states added to the original image, each state covers 10 more pixels of the new image. So as you're moving from state 1 to state 67, more and more of the image is shown. 

2. With 67 states means there are 67 triggers: "the state of the image changes when the slider moves (value is between .. and ..). So as the the slider moves to the right, the new image starts to show up. 

The end result looks and works fine, but this process slows down Storyline by a lot (my SL crashed at least 8 times trying to create this) and it's nearly impossible to update the image as the whole process needs to be repeated. 

I've seen a lot of "before and after image" sliders that are built through javascript, like this demo. I'm wondering if I can use Javascript in Storyline (Execute Javascript as a trigger) to create this.

If so, what would the Javascript look like? 

Thanks!

Be the first to reply