Happy 10 year anniversary to the Articulate ELH Challenge!

I’ve really enjoyed using the opportunity that the ELH challenges provide to try and be experimental with Articulate Storyline and discover ways of achieving things that most of the time I’m not even sure are possible until I get started with an idea.

This week I wanted to see if I could expand on the brilliant technique invented by Nejc Žorga Dulmin to compare two images by having them overlaid on top of each other with a masking style effect achieved with a scrolling panel and animation paths.

The best result as you can see above is not the best, as there are still a few glitches that can occur during use. Therefore I can’t see this technique ever being used in an actual real-world project.

The biggest problem I had was how to manage situations where the user may whip the slider as fast as possible from one side to another. Unfortunately even the fastest possible speed that an individual motion path can travel in SL360 (0.1 seconds) is not capable of keeping up with that many concurrent relative start point paths in such as short burst of time.

Therefore the best I could accomplish for this, rather than attempting to chain animations together, was to have separate animation path lengths that would trigger based on the slider start/end point distance at any 0.1 second moment in time (using a combination of JavaScript and SL triggers).

Unfortunately that means that to theoretically work, an animation path would need creating for each value 1-99 for both left and right directions, and frankly aint nobody got time for that!

So I cheated by stopping short of having 12 motion paths left and right and included a ‘You’re Moving Too Fast’ state to cover the rest. Try whipping the slider above as quick as you can and you’ll see!

So it was a fun experiment but not one that will realistically be taken forward. Ultimately it’s far better to do something like this as a web object to import onto the slide.