[Combines ScrollTrigger Horizontal and Vertical Scroll Snap]

Hi, @Rodrigo thanks a lot for the help. I've tried using parentNode and it has worked. Then right now I'm still trying to use onStart or onComplete because after I tried there was a slight delay in determining the active section, but I'll explore this more deeply. Once again, thank you.

[Combines ScrollTrigger Horizontal and Vertical Scroll Snap]

Hi, @Rodrigo. I want to ask again about the related example of Scroll Trigger that I have made. Currently I'm trying to get the current section by using useRef and window.addEventListener() to get the section.currentRef.offsetTop value to differentiate the current section. But in the section that uses the horizontal scroll snap on the divD, the value of section.currentRef.offsetTop is always 0. When I comment the gsap code for the horizontal scroll snap on the divD, the value of section.currentRef.offsetTop is no longer 0. I have tried using the .kill() method and ScrollTrigger.addEventListener() instead of using window.addEventListener(), but that also doesn't work.

 

See the Pen gOQKYyO by Enragest-21 (@Enragest-21) on CodePen

 

What causes this to happen? Is there something from the gsap code that I made that makes the value of section.currentRef.offsetTop always 0 when using window.addEventListener()?

 

Thank You

[Combines ScrollTrigger Horizontal and Vertical Scroll Snap]

Hi, @Rodrigo. Thank you very much for your help. Sometimes I'm still confused about determining the start and snap values. Then I have also fixed to write only 1 time GSAP Context because it's still in the same ref. I will explore more in more detail on this. Once again thank you very much for the help!

[Combines ScrollTrigger Horizontal and Vertical Scroll Snap]

Hi, I'm new to GSAP and am exploring some basics especially for Scroll Trigger. I want to try implementing one of the examples of full page scroll trigger, scroll snap vertically and horizontally. I have an overview of the flow of moving sections based on scroll as shown below:

From section A to section D1, the vertical scroll snap has been successful. Then from section D1 to section D4 with a horizontal scroll snap has also been successful. But there is a problem when I add a code to scroll snap vertically from section D4 to section E.

 

There is a kind of delay when moving sections to D1-D4 (when I scroll once, it doesn't immediately move to the full section, but displays half of the section first, then displays the full section). Then when I scroll up from section E to section D4, the screen displays the sections between sections D3 and D4.

 

There seems to be a mistake when I write the value for the snap property, but I haven't found a solution yet. Any ideas to try something?

Also any feedback to improve my GSAP code would be perfect.

 

Thanks!
 

See the Pen YzRaYWE by Enragest-21 (@Enragest-21) on CodePen