Jump to content
Search Community

How can i let multiple timelinelite objects work together

PIBC-QingYe test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I need to show multiply cars' real-time track,so i try to create multiply timelinelite objects to fit cars.But when play these timelinelite objects,i find that they play one by one otherwise play together.How can i solve this problem.

Link to comment
Share on other sites

Welcome to the forums, @PIBC-QingYe. I didn't quite understand your question. Are you trying to understand how to control when each timeline plays inside of a master timeline? The position parameter is the key. See https://greensock.com/position-parameter

 

You can have total control of exactly when things play. Overlap as much or as little as you want. 

 

If you still need help, please provide a reduced test case in codepen so we can see what's going on in context. If you're not sure how to do that, see 

 

 

Happy tweening!

Link to comment
Share on other sites

Thanks Jack,I have studied the tutorial which you given , but it can not solve my problem.Just like the following codes:

var t = new TimelineLite();
var car = new Array();
for (var i = 0; i < initnum; i++) { //init
      car[i] = {
        id:xxx,
        name:xxx,        
        tl: t
     };
}

I give each car object a timeline and I want to play these timelines together.However I can only play these timelines one by one.

for(var i=0;i<initnum;i++)
{
  ...
for (var j = 0; j <xxx; j++) 
{
     ....
     car[i].tl.to(obj,...  );
     car[i].tl.to(obj,... );
 }
car[i].tl.play();
}

So how can I to play these timelines together.

Edited by PIBC-QingYe
error code
Link to comment
Share on other sites

I'm having a very difficult time understanding your question. 

 

Your example code assigns the same timeline instance to a bunch of objects in a "car" array. Literally, they're all pointing to ONE timeline instance. Perhaps that's a problem (I have no idea because I don't know what you're trying to do). 

 

Your second example code just has several to() calls and the position parameter isn't used, so they're sequenced by default (one-after-the-other). If you want to position them so that they all start at the same time in the timeline, then simply use the position parameter to define the time you want them to start. For example:

tl.to(obj, 1, {x:100}, 0); //<- the last parameter, 0, is the position.
tl.to(obj2, 1, {y:100}, 0)
...

 

If you still need help, please provide more details about what you're looking to do and/or provide a codepen demo. It's very difficult to troubleshoot based on a small excerpt of code pasted in here. I'd really like to help you, but I'm not sure how because I don't understand what you're asking. 

  • Like 2
Link to comment
Share on other sites

Thank you,I find the problem.Just as you say,I use the same timline,so the animation play one by one.I change my object array and solve the problem.

for (var i = 0; i < initnum; i++) { //init
      car[i] = {
        ...
        tl: new TimelineLite()
      };
}

 

  • Like 1
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.
×
×
  • Create New...