scrollTrigger with toggleClass or something else?

[vicky03]

Hello everyone! I'm trying to make a section like the one you see in the image, consisting of 3 paragraphs and a fixed title. When scrolling, only the three paragraphs must scroll and the central paragraph must become active (by default they have class disabled). When the central paragraph is scrolled, it must return to the disabled class, and then disappear when it touches the title, and the paragraph below in turn becomes active. I hope I have explained well, and hope someone can help me because I've been trying to do this for days without results! In the meantime, thanks to everyone :)

[Cassie]

Hi Vicky!

 

Could you pop together a minimal demo on codepen detailing what you've tried?

 

It'll really help us find a solution for you. Thanks so much.

[iDad5]

@vicky03 I fully concur with Cassie, a demo would help, in case you don't know where to begin at all I'd like to offer some hints.

 

Set the title to position fixed (or stick) with css, so there is no need to further consider it in your programming.

You can use it's bottom as endpoint for the scrollTrigger(s) that remove the active class.

If you want the transition from active to inactive to be smoot and in sync with the scrolling, you should probably do the fade out etc. within gsap and not (only) based on a class.