Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Anitainment

Script Order: gsap, Draggable, InertiaPlugin

Recommended Posts

Hello

 

I have updated an older project with GSAP 3.0.1 and ran into a strange behaviour. I had used Draggable & ThrowProps plugin before. The new code is just like this:

 

Draggable.create('#test', {type: 'x', inertia:true});

 

With the new scripts it suddenly threw an error:

 

“Uncaught TypeError: Cannot read property 'scrollWidth' of null at za (Draggable.min.js:1)…”

 

I reduced the project to the single line above for CodePen. It mysteriously worked on CodePen but not offline and not on my local server. This it gave my an idea: I checked the order of JS files and this is where it becomes really strange.

 

On CodePen the scripts are loaded in this order:

1 gsap.min.js

2 Draggable.min.js

3 InertiaPlugin.min.js

 

On CodePen it works.

The same order locally throws the error above.
The some order locally using type:'x,y' perfectly works!?

 

Actually the only loading order that works locally is:

1 Draggable.min.js

2 gsap.min.js

3 InertiaPlugin.min.js

 

I’m glad that I figured this out because I can continue working on my game but it took hours.

 

Is there an official loading order for the GSAP package or another explanation? Could you play around with a local version and check if you can reproduce the problem?

 

Greetings,

Henry

 

PS. GSAP 3 is great anyway.

 

 

See the Pen NWWmBmO by Anitainment (@Anitainment) on CodePen

Link to comment
Share on other sites

That error is almost surely because you put your <script> tag BEFORE the <body> tag. I added some code to the next release to sense this problem and work around it. 

 

As for the loading order, it doesn't matter at all as long as you register your plugins (which is new in GSAP 3, and is mainly to avoid tree shaking issues in modern bundlers, but also helps allow any loading order). In other words, you should get in the habit of registering any external plugins you use, like:

// ensures the core is notified properly of these plugins
gsap.registerPlugin(Draggable, InertiaPlugin);

In the UMD/ES5 files (like the minified GSAP files you'd load from a CDN into the browser, for example), plugins automatically look to see if GSAP is loaded initially, and if it is, they'll auto-register themselves as a convenience. So technically it's most bulletproof to load the GSAP file FIRST (but it really isn't necessary if you register you plugins properly...and don't worry, it's fine if plugins are registered multiple times). 

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

Hello Jack

 

I must have missed this new plugin registering. With this line it works like a charm.

 

I even like this part because it shows all dependencies right at the beginning. A brilliant piece of code GSAP 3 is.

 

Thank you,

Henry

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×