Forum Discussion
GSAP Draggable
Hi Math.
I attempted to incorporate the code shown above into the Execute JavaScript below, with no luck. zoomEXDragImg is the accessibility name assigned to the object to be dragged. Any suggestions?
var dragableScan = document.querySelectorAll("[data-acc-text='zoomEXDragImg']");
var script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Draggable.min.js";
script.onload = function() {
gsap.registerPlugin(Draggable);
console.log("GSAP Draggable loaded");
}
document.head.appendChild(script);
Draggable.create(dragableScan);
Thanks for any help or direction you can provide.
Two things of note:
- You need to make sure your Draggable.create(dragableScan); statement comes after the plugin script has been loaded and registered. You should either put that statement inside the onload function or set a variable in that function that executes a trigger in Storyline. Then, you can safely execute the Draggable.create() statement.
- This is key as the above code was throwing an error. Storyline uses GSAP version 3.11.3. You're trying to load a plugin for 3.12.5. They are not compatible. Change the script.src to script.src = "https://cdn.jsdelivr.net/npm/gsap@3.11.3/dist/Draggable.min.js";
With these changes, the code you have listed enables dragging of an image placed on the slide.
Awesome! It works like a charm! Thanks so much! Have a great weekend.