Forum Discussion

MichaelCarlino-'s avatar
MichaelCarlino-
Community Member
2 years ago

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 po...
advice
other
MathNotermans-9's avatar
MathNotermans-9
Community Member
8 months ago

GSAP plugins need to be registered after loaded.

gsap.registerPlugin(Draggable);

else they won't work :-)

romainjb's avatar
romainjb
Community Member
8 months ago

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.

 

  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    8 months ago

    Two things of note: 

    1. 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.
    2. 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.

    • romainjb's avatar
      romainjb
      Community Member
      8 months ago

      Awesome! It works like a charm! Thanks so much! Have a great weekend.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    8 months ago

    Nathan_Hilliard solved it for you. As he mentions you need to make sure your scripts are loaded before you call any function in it. That's mainly the reason why i always use a setup like described in the link on external libraries Nathan also referred to. Then im sure that when my variable 'javascriptsLoaded' is set to true, i can use any functionality of the loaded scripts/plugins.

    The second remark Nathan makes is also good to watch. Always check your versions. If you donot add GSAP yourself ( i always do... to ensure you are in control of the version ), you have to ensure any plugins added are the same as the current version used in Storyline.