[Namespace GSAP build]

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)

[Namespace GSAP build]

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. 

[seamless loop with DrawSVG]

Yes! That makes absolute sense to me and did help me figure out how to get the correct numbers depending on the percentage of the segments needed. 

 

Thank you sir.

[seamless loop with DrawSVG]

Thanks Carl!

 

Updated my codepen with your suggestions: 

See the Pen rOyBPK by anon (@anon) on CodePen

 

Was wondering, how did you come up with those numbers (time and percentages)? Was it trial and error?

[SVG graphics - drawn with code or AI?]

You can open the svg file saved with illustrator with a code editor and copy/paste the code into your html file or you can also use some jquery to look for dom elements with a certain class ( <img src="image.svg" class="svg"> ) and embed the files content into a div... 

[seamless loop with DrawSVG]

Thanks Carl, 

 

That's kind of what I feared, I guess I can go into the illustrator file and duplicate all the layers, thank you so much for your codepen example! 

[seamless loop with DrawSVG]

Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!

See the Pen WQRyKp by anon (@anon) on CodePen