Loading GSAP 3 with RequireJS

[szabkel]

I have to load GSAP 3 with RequireJS (from a Magento 2 frontend).  GSAP 2 worked without a problem, however I can't do the same with version 3.

 

If I use the CDN paths inside the require config paths key, I get an error:

TypeError: gsap.registerPlugin is not a function 

Or I get

Error: Script error for "gsap/gsap.min"
https://requirejs.org/docs/errors.html#scripterror require.min.js:1:1795
Error: Script error for "ScrollTrigger/ScrollTrigger.min"
https://requirejs.org/docs/errors.html#scripterror

Should be something trivial, but It drives me crazy, please help.

Thank you very much

 

Edit.: A tried a lot of solutions posted in the forum, but non of the examples were for version 3 and they usually just use TweenMax..etc.

See the Pen YzwqzWG by szabkel (@szabkel) on CodePen

[szabkel]

Okay, maybe I am just retarded, but requirejs adds an alias? I can use the objects like this:

require(['https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js', 
         'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js'], function (GreenSocks3, St) {
  const gsap = GreenSocks3.gsap;
  const ScrollTrigger = St.ScrollTrigger;
  
  console.log(gsap);
  console.log(ScrollTrigger);
    gsap.registerPlugin(ScrollTrigger);
});

 

[ZachSaucier]

Hey szabkel. The code in the CodePen demo above seems to work. Does it not work in your production build?

[szabkel]

Sorry, I accidentally fixed it...

 

It works If I call with

gsap.gsap.registerPlugin(...)

[ZachSaucier]

I'm not very familiar with RequireJS but you could destructure the arguments:

require.config({
  packages: [
    {
      name: 'gsap',
      location: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/',
      main: 'gsap.min'
    },
    {
      name: 'ScrollTrigger',
      location: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/',
      main: 'ScrollTrigger.min'
    }
  ],
})

require(['gsap', 'ScrollTrigger'], function ({gsap}, {ScrollTrigger}) {
  console.log(gsap);
  console.log(ScrollTrigger);
  gsap.registerPlugin(ScrollTrigger);
});

 

[szabkel]

@ZachSaucier Thanks, I did not know about that! GSAP works as intended, sorry about this.

[ZachSaucier]

More info on destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

[JJW]

@szabkel did you figure out a way to get rid of  that pesky redundant gsap.gsap call? I'm looking for a way to do that in the requirejs config, but have not had any luck just yet.

[szabkel]

@JJWWhat @ZachSaucier suggested works. You can just deconstruct the function argument.

require(['gsap', 'ScrollTrigger'], function ({gsap}, {ScrollTrigger}) {...