Simple Trigger-Based Navigation Magic In Storyline!

For this week’s ELH Challenge I wanted to showcase another navigation trick for Articulate Storyline Developers using JavaScript.

The basis for this JS function is once again built on the data-acc-text slide object attribute, created when adding an Alternative Text value to the object (and in Storyline this can be practically any object you can place onto a slide including Groups.)

With these attributes in place we can use the scrollIntoView function baked into JavaScript in order to instruct the browser to skip our Storyline Scrolling Panel to display THAT particular object on screen.

This means for the example above that we can create the cascading message effect with no need to set up animation paths or dozens of animation triggers in our project. Instead we just need one simple Execute JavaScript trigger at the cue point for each new message.

The code used is as follows:

var foo = document.querySelectorAll('[data-acc-text~="SLOBJECT_ACCESSIBLETEXT"]');
foo[0].scrollIntoView({block: "end", inline: "nearest"});

As you might have spotted in the demo above, I am planning to launch a new Storyline Magic series on YouTube! We will cover many more creative examples like this one where using a combo of CSS and JS can create exciting results in Articulate Storyline.

Follow our Insights page for news of when the first episode drops!