arl1nd Posted March 3, 2020 Share Posted March 3, 2020 Hi there, I was wondering if there is a way to namespace "gsap" instance to avoid conflicts with other libraries that import gsap explicitly. Main reason behind this is because I develop WordPress themes, and so other plugins may include gsap library in different versions as well, so what I wanted is a custom build only for my theme and not interfere with other possible instances of GSAP. How can this be done? I know this may not be a good practice to include two or more versions of GSAP on page but with Wordpress this issue needs to be resolved this way I guess. Thank you Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2020 Share Posted March 3, 2020 Hey arl1nd. If you can use ES modules you can have two separate versions of GSAP running. See this thread for more info: However, given you're building themes I doubt that's an option or at least desirable I would instead approach this a different way: Advertise that your theme already loads GSAP! It's a plus, they don't have to load a second version of GSAP to animate things. It saves on load time, load size, and (more minorly) would perform slightly better. Another approach would be for your theme to wait to load GSAP until after the user's custom scripts have loaded. Check if GSAP already exists and use that if so, load it if not. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2020 Share Posted March 3, 2020 If you're using script tags to load gsap, then you can do this. See the Pen 211e2bea90581d261580e24c37fdf477 by osublake (@osublake) on CodePen 6 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2020 Share Posted March 3, 2020 10 minutes ago, OSUblake said: If you're using script tags to load gsap, then you can do this. Very interesting and effective approach Link to comment Share on other sites More sharing options...
arl1nd Posted March 5, 2020 Author Share Posted March 5, 2020 Thank you for helping with this. Really appreciate it! The solution from @OSUblake seems to do the trick as a quick fix. Link to comment Share on other sites More sharing options...
eballeste Posted November 17, 2022 Share Posted November 17, 2022 (edited) This technique helped me setup two gsap environments where I needed to run a certain pixiJS canvas animation w/gsap at 5fps while keeping the rest of my animations on the page at default 60fps. I also had to make sure that I registered the `PixiPlugin` with my namespaced gsap engine. Thank you! // global ticker fps setting window.slowGSAP.gsap.ticker.fps(5); // register the PIXI plugin into our custom slow gsap engine window.slowGSAP.gsap.registerPlugin(PixiPlugin); *Edited to add that instead of using the html markup used above, I load my scripts through the use of a combination of promises and script "load" events in order to guarantee the order in which my code get's called. Edited November 17, 2022 by eballeste add extra note 2 Link to comment Share on other sites More sharing options...
eballeste Posted November 17, 2022 Share Posted November 17, 2022 Here's the code if anybody is interested, it also includes some strategies to avoid adding scripts that are already available globally. const init = function() { function loadScript(url) { return new Promise(function(resolve, reject) { let script = document.createElement('script'); script.src = url; script.async = false; script.onload = function() { resolve(url); }; script.onerror = function() { reject(url); }; document.body.appendChild(script); }); }; // we want two versions of gsap to run on the same page // one will be running at default 60fps, the other will be running at 5fps window.slowGSAP = {}; window.GreenSockGlobals = window.slowGSAP; const slowGSAPLoader = loadScript('URL TO GSAP'); slowGSAPLoader.then(function() { delete window.GreenSockGlobals; let requiredScripts = []; let scriptPromises = []; // reload gsap for normal speeds requiredScripts.push('URL TO GSAP'); if (typeof window.PIXI === 'undefined') { requiredScripts.push('URL TO PIXI'); } if (typeof window.PixiPlugin === 'undefined') { requiredScripts.push('URL TO PIXI PLUGIN'); } // prep the promises for promise.all requiredScripts.forEach(function(url) { scriptPromises.push(loadScript(url)); }); // wait for everything to load before starting our animation script Promise.all(scriptPromises).then(YOURFUNCTIONHERE); }); }(); (sorry for the lack of arrow functions) 1 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