Example
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:
3 Replies
Thank you sharing the code and the wonderful description article complete with explainer video of how this works!!
This is great, Chris. I've already thought of a use case for this on Challenge 507. I assume it will also help stop the entire slide moving when the user attempts to move a slider on a mobile device, too?
Hey Jon. That's absolutely right, it's a quick to copy/paste code snippet just to stop the slide moving around on mobile whenever the user taps and drags on the background area.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.