Slight delay with timeline and tween with staggerFromTo

[Yaniv Nagar]

Hello all,

 

I have this Codepen:

See the Pen vrMVLY by trueicecold (@trueicecold) on CodePen

You'll notice there is a slight delay between the two tweens for each cube animated, because it waits for the entire animation to finish before moving on to the next animation. Is there a way of telling each cube that has finished to move on to the next tween?

 

Thanks!

[Yaniv Nagar]

So I ended up using two tweens:

See the Pen bKJmQY by trueicecold (@trueicecold) on CodePen

Is this the correct approach? could it be done with a timeline?

[Carl]

You can use a position parameter (0.5) on the staggerTo() so that it starts immediately after the first tween in the staggerFromTo()

 

.staggerFromTo($(".menu_tile"), 0.5, {top:"-120px", opacity:0}, {top:0, opacity:1,onUpdate:onHeaderUpdate, onUpdateParams:["{self}"]}, 0.1)
    .staggerTo($(".menu_tile"), 1, {top:"0px", onUpdate:onHeaderUpdate, onUpdateParams:["{self}"], onComplete:onHeaderComplete, onCompleteParams:["{self}"]}, 0.16, 0.5);

 

See the Pen bKJZzZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

https://greensock.com/position-parameter

 

https://greensock.com/docs/TimelineLite/staggerFromTo()

 

[Yaniv Nagar]

Thanks @Carl, but if you have a close look, there's still a delay for the last letters, until they enter the next animation.

Is it possible to achieve the same behavior as my example (no delay for any of the letters) using timeline?

 

Reason I'm asking is because I want to reverse it at some point...

 

Thanks!

[Carl]

sorry, I wasn't exactly sure what you needed. all the letters changing to numbers with the motion was a bit distracting. to replicate your TweenMax example you would set the position to 0 on the staggerFromTo(). 

 

See the Pen KeYLEB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Yaniv Nagar]

Perfect! Thanks a lot, @Carl!

 

Isn't 0 the default value for the position parameter?

 

 

[PointC]

The default behavior for a timeline is to run the tweens in succession. By adding the position parameter you can alter the start times of the tweens. Either with a label, relative time or absolute time.

 

https://greensock.com/position-parameter

 

If you had a collection of tweens that were not part of a timeline, they would all start at the same time (0) provided none of them had a delay or was put into a paused state. Hopefully that helps. Happy tweening.

 

[Yaniv Nagar]

Got it @PointC, thanks for clearing that up!