Using Storyline’s JavaScript API To Create Smoother Mobile Interactions

Articulate Storyline 360’s new JavaScript API has opened up fresh possibilities for developers who want more control over slide behaviour and element styling. In my latest Storyline demo, I’ve explored how to combine API-based targeting with custom CSS to create a responsive and immersive mobile learning experience — while also solving an issue that often gets overlooked when designing for touchscreens.

Targeting Slide Elements with Precision

In previous versions of Storyline, identifying and styling specific slide elements from JavaScript often involved messy workarounds. Now, thanks to the consistent use of data-model-id attributes in the published output, it’s far easier to locate individual elements in the DOM and apply custom styling directly.

For example, in this project, I’ve used a transitioning CSS filter: saturation() value on a series of images. As the bee character is dragged across the screen, each image updates in real time, revealing more vibrant colours. This is achieved using a simple “When the user drags…” trigger per image, paired with JavaScript and CSS to update styles as the interaction progresses.

Fixing the Mobile Slide-Scroll Bug

One of the standout aspects of this project isn’t the animation itself — it’s the lack of unwanted movement on mobile!

If you’ve ever tested a Storyline project on a phone or tablet, you may have noticed that tapping and dragging anywhere on the slide background can cause the entire slide to shift slightly. This behaviour is especially confusing for learners when there’s no swipe navigation in play — it feels like something’s broken, even when it’s technically working as designed.

By inspecting the published project’s output, I pinpointed the specific DOM element being shifted during these swipe gestures. I then created a lightweight JavaScript function that resets the element’s position on every animation frame. This creates a rock-solid slide that doesn’t drift, no matter how much the user swipes across the screen.

To achieve the same results in your own Storyline projects, you can add this script as a single Execute JavaScript trigger on your Slide Master, ensuring it runs automatically on every slide of your project.