Jump to content
Search Community

Complex Demo: Align two tweens with timeline

Giggioz 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

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!

 

Link to comment
Share on other sites

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.

 

 

  • Like 5
Link to comment
Share on other sites

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!

  • Like 3
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...