Calling set on a child timeline at the beginning of its parent timeline

[David Barker]

Hello,

 

I love GSAP! Thank you so much for creating it.

 

I'm running into a problem that I suspect has a simple answer but that I'm just missing. In the Codepen () you'll see I have 4 messages in a chat. I want them to appear one after another, but I need to set the positions/scales/etc. for them to animate from. If I do this in the child timeline, then the sets are only called once each child timeline starts, so on the master timeline, all messages are visible at the beginning and then each one disappears to then reappear.

 

I'd like to run the set commands on each child timeline at the start of the master timeline, so that every message is hidden right at the beginning of the master timeline.

 

Thanks in advance!

 

See the Pen MQXXjm?editors=0010 by dbcongravity (@dbcongravity) on CodePen

[Sahil]

You can explicitly hide all those elements before timeline starts, or call another loop before adding those child timelines that will hide them. There is nothing GSAP can do about it, you can use call method on master timeline right before adding these child timelines to hide elements but either way it is same thing I am suggesting. Just comes down to how you would prefer to do it.

 

EDIT: @David Barker Sorry for the confusion, you will need to hide those elements using CSS by setting their scale to 0. That will give you desired behavior.

[David Barker]

I don't know why I didn't think of that. ??‍♂️ Thanks!