Reveal each section title with GSAP

[late_night1982]

I created a simple vertical scrolling page with different sections. I would like to display the title for each section with a fixed position when the section is in the viewport.

 

I have an issue in the first section (orange). The position of the title is broken. I'm not sure but perhaps it's related to the HTML element .pin-spacer.

 

I'm new in GSAP and not really sure that my code is ok with what I'm trying to achieve. Any help would much appreciated, thanks.

See the Pen XWYqqPx by mathieupreaud (@mathieupreaud) on CodePen

[mvaneijgen]

Hi @late_night1982 welcome to the forum! 

 

I've removed your frist ScrollTrigger create and it seems to fix the issue. I can't figure out what this first ScrollTrigger was doing, so removing it seems like a logic step. Hope it helps and happy tweening! 

 

See the Pen ExRLRmY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[late_night1982]

Thank you very much @mvaneijgen, it works like a charm.

 

Another question, would you know if it's possible to add a class to the current visible title in the viewport (for CSS purpose)? And if you have an example on how to achieve it.

 

Thanks again.

[Rodrigo]

Hi,

 

You can try the toggleClass config option for ScrollTrigger or use the callbacks system to set the class of each heading.

 

This is a fork from @mvaneijgen's codepen using the callbacks approach:

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

 

Happy Tweening!

[late_night1982]

Thanks a lot @Rodrigo!

 

Last question, I promise. As you can see on the codepen, the reveal transition for each section title works in relation with the scroll position of the element in viewport. For example if you stop scrolling the section, the animation will be also in pause. How could we trigger the transform and opacity animation in more simple way? Meaning, when the user scrolls to a section, the title is revealed or hidden automatically.

[Rodrigo]

Hi,

 

Maybe just use the event callbacks to create a GSAP instance for each element and don't use scrub at all. Something like this:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[late_night1982]

Many thanks @Rodrigo.

 

This is exactly what I had in mind. Now I can compare both example (with and without scrub) and learn how to play with it.