Forum Discussion
GSAP Draggable
Hello all,
I cannot remember if GSAPS Draggable is already part of the GSAP library that is already in storyline or if it has to be added manually. If it has to be added manually can you also point me in the right direction on how to add it manually?
7 Replies
Storyline just includes basic GSAP. You can add plugins in different ways. Draggable seems to be quite small, so there is not a lot of overhead attached to loading it. A simple approach is to include the following script, triggered to run on timeline start.
var script = document.createElement('script'); script.src = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Draggable.min.js"; script.onload = function() { //Plugin now loaded. Do something here if you need to. console.log("GSAP Draggable loaded"); } document.head.appendChild(script);You could put this on whatever slide you need to use it on, or on the master if you need it on all slides.
An alternative approach, and one that is better if the library is large or if you wish to include static code with your published module, is to load the plugin script only once from an included web object. To do that, see the following article for the code and procedure. It is pretty straighforward.
How to add jQuery or anyother external Javascript Library to Storyline | Articulate - Community502 Proxy Error
Thanks, Nathan
I remembered Math had a post I had trouble finding so thank you for the link.
GSAP plugins need to be registered after loaded.
gsap.registerPlugin(Draggable);else they won't work :-)
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.
