Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rahuljain

modular way to timeline multiple objects simultaneously

Recommended Posts

 
//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: 10x: 10,  ease:Linear.None });
            tween18.to(this.tweenArr[2].position, { duration: 10x: -10ease:Linear.None });
            tween14.to(this.tweenArr[3].position, { duration: 10x: 20,  ease:Linear.None }); 
            tween5.to(this.tweenArr[4].position,  { duration: 10z: 15,  ease:Linear.None }); 
            tween6.to(this.tweenArr[5].position,  { duration: 10z: 15,  ease:Linear.None}); 
            tween7.to(this.tweenArr[6].position,  { duration: 10z: 15,  ease:Linear.None}); 
            tween8.to(this.tweenArr[7].position,  { duration: 10z: 15,  ease:Linear.None });    
            tween9.to(this.tweenArr[8].position,  { duration: 10x: 25,  ease:Linear.None}); 
            tween10.to(this.tweenArr[9].position, { duration: 10x: 25,  ease:Linear.None }); 
            tween1.to(this.tweenArr[10].position, { duration: 10x: -20ease:Linear.None }); 
            tween2.to(this.tweenArr[11].position, { duration: 10x: -20ease:Linear.None}); 
            tween3.to(this.tweenArr[12].position, { duration: 10x: -20ease:Linear.None}); 
            tween4.to(this.tweenArr[13].position, { duration: 10x: -20ease:Linear.None });
            tween11.to(this.tweenArr[14].position,{ duration: 10y: -20ease:Linear.None}); 
            tween12.to(this.tweenArr[15].position,{ duration: 10y: -20ease:Linear.None }); 
            tween19.to(this.tweenArr[16].position,{ duration: 10x: 15,  ease:Linear.None }); 
            tween13.to(this.tweenArr[17].position,{ duration: 10x: -15ease:Linear.None }); 
            tween16.to(this.tweenArr[19].position,{ duration: 10z: 5,   ease:Linear.None });
            tween15.to(this.tweenArr[20].position,{ duration: 10z: 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 = 0i < node.children.lengthi++) {
                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);
                    } 
                }
            }
        },

See the Pen bGEMjPp by dfgyuiolkjhgf (@dfgyuiolkjhgf) on CodePen

Link to comment
Share on other sites

Can you also tell us what you are trying to do? Right now we can only see how you are doing it, but not what it needs to do, because if we know what it must do then maybe we have a way easier solution. 

 

Also putting your code in a codepen.io with a reduced test case, so we see what the code is suppose to do exactly. 

 

When I see your code I think of a few things what maybe of use 

  • Have you checked out stagger: {}
  • Have you checked out the GSAP.utils? 
  • You can animate arrays with a timeline `tl.to(["ITEM1", "ITEM2", ...., "ITEM99", {x: 5 })`
  • Like 3
Link to comment
Share on other sites

here it is 

See the Pen bGEMjPp by dfgyuiolkjhgf (@dfgyuiolkjhgf) on CodePen

2 hours ago, rahuljain said:
 
//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: 10x: 10,  ease:Linear.None });
            tween18.to(this.tweenArr[2].position, { duration: 10x: -10ease:Linear.None });
            tween14.to(this.tweenArr[3].position, { duration: 10x: 20,  ease:Linear.None }); 
            tween5.to(this.tweenArr[4].position,  { duration: 10z: 15,  ease:Linear.None }); 
            tween6.to(this.tweenArr[5].position,  { duration: 10z: 15,  ease:Linear.None}); 
            tween7.to(this.tweenArr[6].position,  { duration: 10z: 15,  ease:Linear.None}); 
            tween8.to(this.tweenArr[7].position,  { duration: 10z: 15,  ease:Linear.None });    
            tween9.to(this.tweenArr[8].position,  { duration: 10x: 25,  ease:Linear.None}); 
            tween10.to(this.tweenArr[9].position, { duration: 10x: 25,  ease:Linear.None }); 
            tween1.to(this.tweenArr[10].position, { duration: 10x: -20ease:Linear.None }); 
            tween2.to(this.tweenArr[11].position, { duration: 10x: -20ease:Linear.None}); 
            tween3.to(this.tweenArr[12].position, { duration: 10x: -20ease:Linear.None}); 
            tween4.to(this.tweenArr[13].position, { duration: 10x: -20ease:Linear.None });
            tween11.to(this.tweenArr[14].position,{ duration: 10y: -20ease:Linear.None}); 
            tween12.to(this.tweenArr[15].position,{ duration: 10y: -20ease:Linear.None }); 
            tween19.to(this.tweenArr[16].position,{ duration: 10x: 15,  ease:Linear.None }); 
            tween13.to(this.tweenArr[17].position,{ duration: 10x: -15ease:Linear.None }); 
            tween16.to(this.tweenArr[19].position,{ duration: 10z: 5,   ease:Linear.None });
            tween15.to(this.tweenArr[20].position,{ duration: 10z: 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 = 0i < node.children.lengthi++) {
                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);
                    } 
                }
            }
        },

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

Link to comment
Share on other sites

You don't need to @ people.

 

You shouldn't use new for timelines. It's not a constructor.

// BAD
var tween1 = new gsap.timeline();

// GOOD
var tween1 = gsap.timeline();

 

You also don't need timelines for a single animation. Why don't you just create a list of the properties to animate?

 

var animationData = [
 { x: 10 },
 { x: -10 },
 { x: 20 },
 { z: 15 },
 { x: 15 }
];
   
tweenArr.forEach((node, i) => {
  var settings = Object.assign({
    duration: 10,
    ease: "none"
  }, animationData[i]);
  
  gsap.to(node.position, settings);     
});

 

 

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

9 minutes ago, rahuljain said:

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

In that case you could use a timeline. But Blake's approach of trying to use an array of values (if you have a chained sequence perhaps an array of array of values might be better) is a good way to keep your code DRY (don't repeat yourself). 

 

Side note: Using GSAP's .defaults() might help you need to type less code. Also for your ease you should use the condensed form: ease: "none".

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

We're happy to answer any questions that you have but unfortunately we don't have the capacity to build out everything for you. We're already outlined the approach you should take. Please let us know if you have specific questions and please provide a minimal demo showing the issue along with stating the issue clearly :) 

  • Like 1
Link to comment
Share on other sites

Are you trying to do random animations? Create a function where you pass in a target and have it create an animation, in the onComplete, have it call a function to do another random animation. Rinse and repeat.

  • Like 3
Link to comment
Share on other sites

no not random animation i want to control animation for each part of the assembly.  

See the Pen bGEMjPp by dfgyuiolkjhgf (@dfgyuiolkjhgf) on CodePen

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 

 

Link to comment
Share on other sites

Don't use new. TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated.

 

 

I think you have some logic problems, but if you know all the animation values, then just loop through and create everything up front.

 

var animationData1 = [
  { x: -100 },
  { x: 100 },
  { x: -100 },
  { x: 15 },
];

var animationData2 = [
  { x: -15 },
  { x: 10 },
  { x: -10 },
  { x: 15 },
];

this.tweening = gsap.timeline({
  onUpdate: showProgress.bind(this),
  defaults: {
    duration: 5,
    ease: "none"
  }
});

this.tweenArr.forEach((node, i) => {  
  
  var settings1 = Object.assign({}, animationData1[i]);
  var settings2 = Object.assign({}, animationData2[i]);
  
  this.tweening
    .to(node, settings1, 0)
    .to(node, settings2, ">");
});

 

 

  • Like 2
Link to comment
Share on other sites

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(nodesettings10)
                  .to(nodesettings21);//here
//[lease mr Os help me in this.
 
);
Link to comment
Share on other sites

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.

  • Like 2
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.
×