I recently saw an interesting tweet from Articulate’s David Anderson about a cool interaction on the National Geographic website.

The page shows a very long (tall) comparison of different types of sharks that one can scroll through. I thought it would be a nice exercise to try and recreate this interaction in Storyline, using the assets from the site. I had used Storyline sliders before to vertically scroll an image, here is an example. All that’s required is to insert a slider, change its thumb fill to a picture and rotate the slider 90 degrees. However the National Geographic page is so long that using one image as the fill for a slider thumb would not be enough. I ended up recreating the page using five 2048*2048 png images with transparent background, each being used as the thumb fill in a slider. One extra slider was used to ‘drive’ the five image sliders. I used the maximum value (9999) for the end point and the smallest possible Step value (0.01).

The five image sliders were set up to be controlled by the same Overall slider variable. Again, I had to max out the slider width dimensions (which would become the slider height after rotation) at 9999 px. One thing to remember is that the slider settings (accessible from a slider’s Design tab)for the Overall slider need to be reversed for the image sliders. For example, the Overall slider has the following settings: Start: 0, End: 9999, Initial: 0. An image slider is set to: Start: 9999, End: 0, Initial: 0. These settings ensure that the images sliders move up when the Overall slider is moved down and vice versa.

As you can see in the screenshot above, even with the Slide View zoomed out all the way to 10%, you still can’t see the full height of an image slider. Since all five image sliders are controlled by the same variable, there was no need for additional triggers. The trick was to position the sliders vertically so that they provided one long seamless scroll. The only triggers I added were used to continuously play the audio and loop a subtle animation on the animated diver gif. With that I was able to vertically scroll a 10 0000+ px high image in a 1600 width*900 height Storyline project.

Here is the finished Storyline interaction. I noticed that in the HTML5 version the slider thumb images are all blurry, this may have happened (I’m guessing here) by converting my original Storyline 2 file to a Storyline 360 project.