scrolltrigger move text to top one after one by scrolltrigger

[Mukhriddin]

Hi there!
How can I show Node element one after one on scrollTrigger?!

What it behaves now: 
All text nodes are going to center and once they reach center of window, all of them are vanishing at the same time (autoAlpha: 0)

 

What I expect:
Each node element goes to the center one after one. Basically, when the first element starts to vanish, the second one  start to move to the center. And this chain loops until last one vanishes.

Here is a minimal demo:
https://stackblitz.com/edit/nuxt-starter-vulayy?file=components%2FTruckSimulator.vue,app.vue

P.s.: I kinda feel this can be done by "position". But I am not sure how to do that

[Rodrigo]

Hi,

 

Just create a loop for the cards, add a couple of to() instances to the timeline and using the position parameter create an overlap with the previous card:

See the Pen WNWBaKz by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!