Reverse stagger from different starting point?

[Devotee007]

I'm trying to reverse a stagger, it works as it is now, but I want it to start from the "top" on the reverse. Not it's just reversing the animation. If that make sense? 

//Devotee007

See the Pen jORrMgN by Devotee007 (@Devotee007) on CodePen

[mvaneijgen]

Then you don't want to reverse. You have to view a tween as a video and you scrub through a video progress bar in reverse it will do the exact same thing as it would do playing, but in reverse, eg in a Youtube video people don't suddenly walk forward when scrubbing the video backwards.

 

In your case you just want two tweens that call each other when done, I've not implemented the delays, but you could easily wrap the .restart() in a gsap.delayedCall() https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/ with the delays you want. 

 

I've never seen a stagger of -0.1, when using more complex staggers I highly recommend breaking out the object and set their properties accordantly, eg here set from: "end", because you want to last item to play first https://gsap.com/resources/getting-started/Staggers

 

Hope it helps and happy tweening! 

 

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

[Devotee007]

@mvaneijgen,  thank you! That helped me a lot.