szabkel Posted June 11, 2020 Share Posted June 11, 2020 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 Link to comment Share on other sites More sharing options...
szabkel Posted June 11, 2020 Author Share Posted June 11, 2020 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); }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 11, 2020 Share Posted June 11, 2020 Hey szabkel. The code in the CodePen demo above seems to work. Does it not work in your production build? Link to comment Share on other sites More sharing options...
szabkel Posted June 11, 2020 Author Share Posted June 11, 2020 Sorry, I accidentally fixed it... It works If I call with gsap.gsap.registerPlugin(...) Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 11, 2020 Share Posted June 11, 2020 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); }); 2 Link to comment Share on other sites More sharing options...
szabkel Posted June 11, 2020 Author Share Posted June 11, 2020 @ZachSaucier Thanks, I did not know about that! GSAP works as intended, sorry about this. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 11, 2020 Share Posted June 11, 2020 More info on destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 1 Link to comment Share on other sites More sharing options...
JJW Posted June 15, 2020 Share Posted June 15, 2020 @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. Link to comment Share on other sites More sharing options...
szabkel Posted June 15, 2020 Author Share Posted June 15, 2020 @JJWWhat @ZachSaucier suggested works. You can just deconstruct the function argument. require(['gsap', 'ScrollTrigger'], function ({gsap}, {ScrollTrigger}) {... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now