Jump to content
Search Community

Reveal each section title with GSAP

late_night1982 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...