late_night1982

Thanks a lot, that helps a lot!

Hello, I'm using ScrollTrigger to reveal element on scroll using batch. I would like to add a class inside 'onEnter' parameter. I currently use 'attr' but it erases all my classes. I read I could use classList.add() to do it, but I'm not sure where in the code to place it and how to do it. ScrollTrigger.batch(".js-reveal", { interval: 0.1, onEnter: batch => gsap.to(batch, {autoAlpha: 1, stagger: 0.1, attr: { class: "is-visible" }}), }); I use a GSAP pen for example. Thank you.

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.

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.

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.

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.