How to put multiple elements grouped through the same animation on scroll?

[vialito]

Hello everyone,

 

I'm trying GSAP and Scrollmagic for the first time.

 

This is what I'm trying to achieve:

 

There are multiple sentences, 15 in this example. At first you can't see anything. When you start to scroll, the first sentence should appear at the 3rd position. When scrolling further down, this first sentence should move up to the second middle position and scale 2. Now the next sentence should appear on the previous position of the first sentence. Finally, When scrolling even further down, both sentences should move up again when when scrolling further down, taking each other's places. Until you've finished scrolling though all sentences.

 

The attachment shows what the container containing the text should look like when scrolling. When starting to scroll only one sentence, the first, should be visible. Then two and max three.

 

I've gone from toggling classes to setting multiple tweens, to staggering tweens to using cycles but I still feel I'm missing out on something.

 

 

See the Pen WVjJoe by vialito (@vialito) on CodePen

[mikel]

Hey @vialito,

 

Welcome to the GreenSock Forum.

 

Here is a slightly different approach (NO magicScroll) to achieve the desired (?):

 

See the Pen PMmyvm by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel