rahuljain

Okay i played around a little and it works as per aspected . so now whenever i need to chain timeline for an assembly i will go through this code again. thank you so much to everyone for helping me out i know i can be so cling sometimes but thats just me eager to find the solution. thanks mr os, zach,mc love you guys.

No logic problem might not be the case. Actually i am new to gsap timelines's please forgive me for that. i am working on it. I have looked on to your code, i have changed arrays (animationData1 and animationData2) coordinates and used the same logic like yours . and now it give me error saying "gsap.js:94 Invalid property x set to -15 Missing plugin? gsap.registerPlugin()" for all the index's in animationData2. the first animation (animationData1) gets completes fine. but the moment it jumps for another to--> this.tweening .to(node, settings1, 0) .to(node, settings2, 1);//here //[lease mr Os help me in this. );

no not random animation i want to control animation for each part of the assembly. https://codepen.io/dfgyuiolkjhgf/pen/bGEMjPp like you said . i am calling a function chainTween on onComplete of my first gsap timeline but that doesnt seems to work the progress bar shows it progress but animation for nodes doesnot happen

yes thats what i thought mr. zach . blacks approch is much better for single animation. it would be a great help if you could type some code for the approach i should keep to carry on further.

Ok i am sorry i am new here . also i need too play around with your code but i am sure it works and its small as well . but what about i need to chain animation for each node in future. like for example what happens now is each node is translating from one place to another , but let's say i need to chain rotation after translation completes and then again chain transtation when rotation completes.?

here it is https://codepen.io/dfgyuiolkjhgf/pen/bGEMjPp thank you for replying @mvaneijgenI have updated a codepen . now consider the function findTheChildrens returns me a number of javascripts 3d objects (i have shown you divisions for this case. ). now consider each javascript object of type mesh or group is pushed into my the global array when found . now i want to use a way so that i can implement different translation to each object using index of my global array. @ZachSaucier @GreenSock

//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); } } } },

Omg @ZachSaucier you came like a god here. gsap.globalTimeline. is what i was looking for. this function responds the output like i wanted. actually i had an assembly in three.js which i want to explode so that i can see all the parts of which it is made of. so i was traversing the assembly to get it child nodes and animating them from there initial position to target position. each time the traversing happens and Timeline function gets called which is responsible to explode the assembly. i was able to do so but i also wanted to implement a pause button which pauses all the animation for all the parts in one go. and a resume feature which resumes the animation on button click. i hope its clear to you now a little. and gsap.globalTimeline is what i was looking for. the output is good. i hope my question helps someone in future. thank you so much and thanks @jimmy-a for helping me out as well. Gsap rocks

is there any other way cause creating even small code is a headache @jimmy-a

okay @jimmy-a working on it

Actually @jimmy-a theres a lot i have to code which will consume a lot of time i am just trying to access all the objects that have been tweened earlier so that i can apply pause to all of them. but clearly it will be applicable for only one object cause this.tween variable is global and the last object that remains in it will get paused . but i dont know how to get all of them . i have tries almost all the inbuild functions but couldn't get the output

//this right here is a code inside a function which gets called multiple times and responsible to animate multiple objects from its initial position to targeted position(object and position changes after every iteration). //Also a progress bar is implemented which is responsible to show the progress of the animation. this.tween = new TimelineMax({ onUpdate: showProgress.bind(this)}); this.tween.to(from, { duration: 10, x: to.x, y: to.y, z: to.z ,}); this.tween.from(".red", this.tween.duration(), { scaleX: 0, transformOrigin: "0px 0px", ease: Linear.easeNone }, 0); function showProgress() { this.progress= new TweenLite.set(progress, { scaleX: this.tween.progress(), transformOrigin: "0px 0px" }); duration.innerHTML = "Progress:" + parseInt(this.tween.time() * 10) + "%"; } } //i want to create a function which gets all the animating objects(15) in the scene and apply pause to all of them //right now what happens is pause is being applied to only one object not all the objects. //please help pauseAnimation: function() { this.tween.pause() }