Complex Demo: Align two tweens with timeline

[Giggioz 4 Likes (Newbie)]

Hi,

 

i'm building a demo for a card game and i got it working thanks to the amazing hints of the experts in this forum.

 

I think i developed the hardest pieces and now i want to play with the timeline to make some animation happen at the same time.

I already watched the good tuts and read the documentation about timelines but something goes wrong with this specific case.

 

Please have a look here

https://codesandbox.io/s/0v6p9z27n

 

In the animation.js file at line 103 you have the animation that is fired when you press DEAL.

 

The animation consists of 4 parts (line 113-116), if i put a label to the last two animation (to make them run at the same time) it stops working.

 

Can you please help me with this issue?

Thanks!

 

[Carl 9,066 Likes (Superhero)]

In the future please, try to explain the behavior you would like to see. "I want to make some animation happen at the same time" doesn't really tell us very much when its an app we've never seen with 100+ lines of code.

 

Perhaps something like: "when you hit the deal button I would like the existing cards to move out of the way as new ones come in". 

 

After some time looking at the code that was what I had to guess you wanted.

 

The issue you were running into is that you only use one timeline (tl) and every new animation is added to it. If you hardcode a label value into those add() methods what is going to happen is that you are always going to be using the same label for every new animation which means each time you deal, all the animations will be put in the timeline at the same time. 

 

When GSAP sees that the label you are using as the position parameter is already in your timeline it will automatically put new animations where that label is.

 

 

I think what you need to do is just make sure the animations you create on each deal use a unique label name.

Notice how I am incrementing the count variable below and appending it to my "label" string.

 

 

line 117

  count++;
  tl.add(instantTeleport(ids));
  tl.add(offsetCards("*overlap*", ids, 100, 0, 0, 0, 1));
  tl.add(offsetCards("*adjust previous*", oldIds, offset, 0, 0.3, 0.1, 0), "label" + count);
  tl.add(offsetCards("*deck => hand*", ids, offset, oldIds.length * offset, 1, 0.2, 0), "label" + count);

 

 

https://codesandbox.io/s/j7j3117wpv

 

The project looks like it is coming along nicely.

 

 

[Giggioz 4 Likes (Newbie)]

11 minutes ago, Carl said:

In the future please, try to explain the behavior you would like to see. "I want to make some animation happen at the same time" doesn't really tell us very much when its an app we've never seen with 100+ lines of code.

 

Perhaps something like: "when you hit the deal button I would like the existing cards to move out of the way as new ones come in". 

 

After some time looking at the code that was what I had to guess you wanted.

 

 

You were right twice: i was cryptic and that was the behaviour i wanted

 

Thanks a lot, you gave me a deeper insight on timelines.

 

I guess i do not even need to use a unique timeline instance, i can refactor it.

 

Regards!