eballeste

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)

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.

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.

Thanks Carl! Updated my codepen with your suggestions: http://codepen.io/anon/pen/rOyBPK Was wondering, how did you come up with those numbers (time and percentages)? Was it trial and error?

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...

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!

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!