Positions in a Timeline with stagger scrub tweens

[ngrmm]

I would like my frames stagger animation to start at trigger start and last to the trigger end.

And the two box animations should also start at trigger start.

I used relative positions, but it does not work. Do I have to use absolute positions?

See the Pen VwBJOyz by ngrmm (@ngrmm) on CodePen

[ngrmm]

is this the right way?

 

See the Pen XWBLLOZ by ngrmm (@ngrmm) on CodePen

[mvaneijgen]

Yes that is one of the options, Personally I like to use the  "<" position parameter, this means animate at the same time as the previous tween. This way it doesn't matter if you end up putting something at the start of the timeline in the future. All the tweens close to each other will start together.

 

I highly recommend reading the position parameter post, there is much more info on there and just play around with all the possible features and see what they do. Hope it helps and happy tweening! 

 

See the Pen Yzjoomo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[ngrmm]

8 minutes ago, mvaneijgen said:

Yes that is one of the options, Personally I like to use the  "<" position parameter, this means animate at the same time as the previous tween. This way it doesn't matter if you end up putting something at the start of the timeline in the future. All the tweens close to each other will start together.

THX. But looks like the "<" position parameter not doing what I want. I want the frames animation and the box animation to be in sync from timeline start to the end.

[mvaneijgen]

Ah I understand what you mean now. Here are two examples. I was thinking of making another where you add two timelines to each other and make them one of them the duration of the first, so that you don't have to know what the duration of the second timeline is to make them in sync, but I need to think of it some more, but your first solution seems solid.

 

See the Pen eYjwqEL?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen