When Storyline 2 first came out, I had built a few slider interactions to test this new feature. I had also looked into using Storyline sliders to create ‘Before-and-After’ sliders like the ones you sometimes see on websites. Here are just a few examples of HTML/CSS-based sliders. I never got around to building these types of sliders and frankly it seemed too easy to build in Storyline.

This morning I was looking for something on Vimeo and happen to come across this neat ‘Now-and-Then’ video of Alkmaar, a town in the Netherlands. The video shows a side-by-side comparison of the what the town looked like in 1914 and 2014. I wondered if I could use Storyline to create a ‘Before-and-After’-type slider, BUT WITH A VIDEO.

I started by recording the video and then edit it into two separate clips, one for the 1914 section and the other for the 2014 portion. I then imported the two clips into Storyline.

The challenge was to use a slider to seemingly drag the 1914 video over the 2014 video while both videos are playing.

I added two motion path animations to the 1914 video and set up triggers that play either animation based on the slider value.

Storyline’s current motion path animations do not allow for precise control, so I used some temporary lines to help me line them up and keep them straight. I did get it to work although the movement is a bit jerky. And if you move the slider rapidly back and forth, the animation just can’t keep up and breaks. Nevertheless, I learned enough from this little experiment to leave it as is. There are probably ways to improve this interaction, but sometimes ‘good enough’ is all I need! See here how it turned out.

Not bad, considering I did this during my morning coffee break!

Edit 02/2017: Here is the .story file for download (Note: It’s 61MB).