Jump to content
Search Community

Namespace GSAP build

arl1nd test
Moderator Tag

Recommended Posts

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

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. 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

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 by eballeste
add extra note
  • Like 2
Link to comment
Share on other sites

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)

  • Thanks 1
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.
×
×
  • Create New...