Search the Community

Hi guys, Basically i have two or more containers and i dont want to finish the last container before starting all over again from the first one. So if the one container content is done animating i want to start all over again on that particular container only, rather than waiting for the last container to finish and starting all over again from the first one, which is happening in my codes. see my codepen url. Let me know if this confused you guys:)

//This is a onclick function which gets triggered on a button click which is responsible to animated each node to some coordinates defined startAnimation: function(){ // condider findThechildrens function pushes 21 childrens in the global array (function defined below) //please if anyone has any idea to make this code modular and not repetative please help findTheChildrens(); var tween1 = new gsap.timeline(); var tween2 = new gsap.timeline(); var tween3 = new gsap.timeline(); var tween4 = new gsap.timeline(); var tween2 = new gsap.timeline(); var tween3 = new gsap.timeline(); var tween4 = new gsap.timeline(); var tween5 = new gsap.timeline(); var tween6 = new gsap.timeline(); var tween7 = new gsap.timeline(); var tween8 = new gsap.timeline(); var tween9 = new gsap.timeline(); var tween10 = new gsap.timeline(); var tween11 = new gsap.timeline(); var tween12 = new gsap.timeline(); var tween13 = new gsap.timeline(); var tween14 = new gsap.timeline(); var tween15 = new gsap.timeline(); var tween16 = new gsap.timeline(); var tween17 = new gsap.timeline(); var tween18 = new gsap.timeline(); var tween19 = new gsap.timeline(); tween17.to(this.tweenArr[1].position, { duration: 10, x: 10, ease:Linear.None }); tween18.to(this.tweenArr[2].position, { duration: 10, x: -10, ease:Linear.None }); tween14.to(this.tweenArr[3].position, { duration: 10, x: 20, ease:Linear.None }); tween5.to(this.tweenArr[4].position, { duration: 10, z: 15, ease:Linear.None }); tween6.to(this.tweenArr[5].position, { duration: 10, z: 15, ease:Linear.None}); tween7.to(this.tweenArr[6].position, { duration: 10, z: 15, ease:Linear.None}); tween8.to(this.tweenArr[7].position, { duration: 10, z: 15, ease:Linear.None }); tween9.to(this.tweenArr[8].position, { duration: 10, x: 25, ease:Linear.None}); tween10.to(this.tweenArr[9].position, { duration: 10, x: 25, ease:Linear.None }); tween1.to(this.tweenArr[10].position, { duration: 10, x: -20, ease:Linear.None }); tween2.to(this.tweenArr[11].position, { duration: 10, x: -20, ease:Linear.None}); tween3.to(this.tweenArr[12].position, { duration: 10, x: -20, ease:Linear.None}); tween4.to(this.tweenArr[13].position, { duration: 10, x: -20, ease:Linear.None }); tween11.to(this.tweenArr[14].position,{ duration: 10, y: -20, ease:Linear.None}); tween12.to(this.tweenArr[15].position,{ duration: 10, y: -20, ease:Linear.None }); tween19.to(this.tweenArr[16].position,{ duration: 10, x: 15, ease:Linear.None }); tween13.to(this.tweenArr[17].position,{ duration: 10, x: -15, ease:Linear.None }); tween16.to(this.tweenArr[19].position,{ duration: 10, z: 5, ease:Linear.None }); tween15.to(this.tweenArr[20].position,{ duration: 10, z: 10, ease:Linear.None }); }, //This functions gets called only one time which is responsible to tranverse the assembly and keep all found childrens into a global array (tweenArr) findTheChildrens : function(){ this.findTheChildrens = function(){}; var node = scene.children[2].children[0]; for (var i = 0; i < node.children.length; i++) { var childNode = node.children[i]; if (childNode.children.length > 0) { if (childNode.children[0].type == "Group" || childNode.children[0].type == "Mesh") { this.tweenArr.push(childNode); } } } },

Hi there! We (among many others) are trying to fight against issues on CMS platforms (e.g. WordPress) caused by loading multiple versions of GSAP. We've already examined previous threads about possible solutions: http://greensock.com/forums/topic/7753-two-versions-of-tweenmax-on-same-page/ http://greensock.com/forums/topic/7074-jquery-wrapper-animate-stop/#entry26398 http://greensock.com/forums/topic/9881-avoid-multiple-loaded-tweenmax-and-tweenlite/ http://greensock.com/forums/topic/9910-order-loading-tweenmax-and-tweenlite-error/ However, none of the mentioned suggestions give us a perfect solution to avoid conflicts. In an environment like WordPress, we cannot control the script order / GSAP builds & versions for every plugin and theme. If there would be 10 entirely different versions, then we would have to deal with that, without the ability to change scripts from other parties. We're following this topic for years now, hoping that a perfect solution would come one day. Sandboxing does not seem to be reliable in all cases, often times we literally replace a conflicting plugin to another conflicting plugin. This occasionally involves angry authors who don't want to accept our reasoning and blame us breaking their plugin without realizing what's going on. I understand that the suggestions you've made to others can help in certain scenarios, but in my understanding it cannot be used as a universal way to avoid issues and not to cause conflicts to others. To this end, I would greatly appreciate if you could answer the following questions: 1. Can you please confirm if this really is the case, so we have some level of proof for other authors? 2. Do you consider handling cases like this internally in a future versions of GSAP? 3. Merging your suggestions from the different threads, I believe we've found the best possible combination. Can you please review the code below and tell us if it is safe to use for us and anybody else on a crowded CMS platform like WordPress? <!-- Loaded by other plugins --> <script src="TweenMax.js"></script> <script> // Store GreenSock vars to restore them later var oldGS = window.GreenSockGlobals; var oldGSQueue = window._gsQueue; var oldGSDefine = window._gsDefine; // Reset _gsDefine to load the new version in all cases // Seems to be necessary for maximize the efficiency window._gsDefine = null; delete( window._gsDefine ); // Capture and separate the new version in the GSAP variable var GSAP = window.GreenSockGlobals = {}; </script> <!-- Our version --> <script src="js/TweenMax.js"></script> <script> // Reset everything window.GreenSockGlobals = null; window._gsQueue = null; window._gsDefine = null; delete( window.GreenSockGlobals ); delete( window._gsQueue ); delete( window._gsDefine ); // Restore the affected variables from older version (if any) window.GreenSockGlobals = oldGS; window._gsQueue = oldGSQueue; window._gsDefine = oldGSDefine; </script> <!-- Loaded by other plugins --> <script src="TweenMax.js"></script> Thank you very much for your time and effort! Cheers, George