Trying to implement this text colour change on scroll.

Hi there,

I have been trying to figure out the best way of doing something like this.

[https://gyazo.com/cac3378796d2dbcbf844298ab980c4d5](https://gyazo.com/cac3378796d2dbcbf844298ab980c4d5)

I'm finishing up my final project for a bootcamp and looking to push the boat out a little and bring in some scroll animations. I have been spent today getting to grips with the basics of GSAP plus scrollTrigger. So far I have implemented some scroll transitions just with opacity.

I have looked into intersection observer as well and unsure first of all which is the best approach out of scrollTrigger and intersection observer and secondly how to really implement that. I couldn't get the opacity to change once leaving. All in all it was all very messy and I couldn't work it out.

In my head it's something like. 3 P tags with their respective content. Then just a line in the middle of the screen, rather than looking at the entire screen and whichever P tag is intersection that line currently they have a class applied to them. Even vanilla JS I would find this tricky. But to bring in React too.

Any help or guidance would be appreciated in going about implementing a feature like this. It's something I love visually but so inexperienced it's a little challenging!