Fixing Slide Positions For Drag Interactivity On Mobile Using JavaScript
Hey Heroes, I’ve recently been working on a number of client projects that really put the new JavaScript API in Storyline to good use! One challenge I had to overcome was how Storyline behaves on mobile devices. By default, it seems to add a slide-drifting transition when users swipe—great if you're building swipe navigation between slides, but not so helpful when users are meant to interact with objects on the slide itself. For example, trying to drag an object can instead cause the whole slide to shift, which can lead to some confusion and frustration. For this week’s challenge, I’ve put together a demo that showcases the solution I developed to disable this behaviour when needed. You can try out the project here: LINK Copy the JavaScript code snippet for your own projects: LINK I also recorded this video for YouTube showing the results:
My Experience with the New JavaScript API
This week, I participated in E-Learning Challenge #506, hosted by the Articulate community. The theme was all about integrating the new JavaScript API feature into Storyline projects. Before I dive into my submission to this challenge, let’s take a closer look at why and when JavaScript can be handy. By tapping into Storyline’s new JavaScript API, developers can go beyond the limitations of built-in triggers and states—adding more dynamic functionality, custom logic, and integration with external data sources to create truly interactive learning experiences. Why and When Use JavaScript While Storyline’s built-in triggers and states offer a solid foundation for creating interactive courses, there are times when they just aren’t enough—especially for more advanced or customized learning experiences. That’s where JavaScript comes in. Using JavaScript in Storyline allows you to: Manipulate variables dynamically: Perform calculations, update multiple variables at once, or set values based on complex conditions. Create custom interactions: Go beyond Storyline’s standard interactions by building logic that isn’t otherwise possible—like randomization, time-based events, or advanced form validation. Connect to external data sources: Pull in real-time data from APIs, user profiles, or tracking systems to personalize the learning experience. JavaScript isn’t always necessary, but when you need more control, personalization, or external connectivity, it can be the key to taking your project to the next level. And with the new JavaScript API at your fingertips, using JavaScript in Articulate Storyline becomes easier than ever. My submission For my submission, I created a freeform drag-and-drop interaction where learners are challenged to place five items in the correct order. The core interaction itself is built with Storyline’s drag-and-drop functionality, but the real enhancement came through the use of the JavaScript API. Using JavaScript, I was able to easily manipulate the transparency of the numbered items to guide learner feedback more effectively. On the base layer, I set all the numbers to be fully transparent. Then, by adding a small snippet of JavaScript to each feedback layer, I made the corresponding numbered items fully visible—revealing the correct sequence only after the learner attempts the drag-and-drop activity. This subtle use of JavaScript not only improved the clarity of feedback but also gave me greater control over the visual presentation—something that would have been difficult to achieve using triggers alone. Final Thoughts Exploring the new JavaScript API in Storyline has been a rewarding experience. The best part for me is how accessible it is—element IDs are now clearly listed in the JavaScript panel, which removes much of the guesswork that used to come with trying to target specific objects on the slide. Another big win: responsiveness. Unlike some animation libraries like GSAP, which can break alignment or positioning when the browser window is resized, the JavaScript API works seamlessly with Storyline’s layout engine. This makes it far easier to create dynamic effects without worrying about them falling apart on different screen sizes. All in all, this feature opens the door to a lot of creative possibilities—without having to fight the tool. I’m excited to keep experimenting and see what others in the community come up with next. Want to Try It Yourself? You can preview the interaction here to see it in action. If you'd like to explore how it was built, I’ve also made the full project available as a free download. Feel free to dive in, tweak it, and make it your own! About me: Paul Alders LinkedIn Profile The eLearning BreweryOrder a Tree
I took an example from this page Storyline 360: JavaScript Best Practices and Examples to open a new email with pre-filled information because that is something that will be useful for us going forward. Choose the tree with the buttons which will bring up the order button for that tree. Pretty basic. Order a Tree
