late_night1982 Posted November 25, 2022 Posted November 25, 2022 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 Posted November 25, 2022 Posted November 25, 2022 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. 2
late_night1982 Posted November 25, 2022 Author Posted November 25, 2022 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 Posted November 25, 2022 Posted November 25, 2022 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 Posted November 25, 2022 Author Posted November 25, 2022 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.
Solution Rodrigo Posted November 25, 2022 Solution Posted November 25, 2022 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 Posted November 25, 2022 Author Posted November 25, 2022 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. 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now