ScrollTrigger | toggleClass for multiple Elements but only one should get the class

[ainzon]

Hi,

 

I try to "reveal" sentences while scrolling down. That works so far and I played around with batch and timeline but I could not figure out how to "reveal only" one sentence at a time (and not two or three together). 

 

Additional idea: If a sentence is "active" - could I "pretend" a scrolling of 100px so the "active" sentence is longer "active"?

 

Thanks for any help and Ideas...

See the Pen rNvzbGb by boris-andraschko (@boris-andraschko) on CodePen

[Rodrigo]

Hi,

 

It would be better to keep everything in a single timeline and then scrub that timeline's progress with Scroll Trigger:

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

 

Hope that this is close to what you're after.

 

Happy Tweening!!!

[ainzon]

Hi Rodrigo,

 

thank you very much for your answer. I played around with your solution to understand what you where doing.

 

So far it is clear. Just a question:

The if-statement in the forEach is not really necessary - it´s just because otherwise the first index would be -1 (there is no element before the first one) which would be wrong - ist that right or do I miss a point?

 

But thanks anyway - it works!

[mvaneijgen]

1 hour ago, ainzon said:

The if-statement in the forEach is not really necessary - it´s just because otherwise the first index would be -1 (there is no element before the first one) which would be wrong - ist that right or do I miss a point?

 

If you remove the statement you'll get an error "GSAP target undefined not found" and depending on your setup this will or will not run your code, so it may be necessary and it is always better to write code that doesn't have errors in it. 

[ainzon]

Thank you for your answer @mvaneijgen! You are right!