Issue with Observer and ScrollTrigger in a Pinned Section with GSAP

[FC-Nour]

Hi everyone,

I’m working on a project where I’m trying to use GSAP’s Observer plugin in combination with ScrollTrigger to create a section-based scrolling experience. The goal is to have vertically pinned sections, and when the user reaches a certain section (Section 3), a zoom animation starts. During the zoom animation, I want to disable the Observer to prevent the user from scrolling to the next or previous sections, and re-enable the Observer once the zoom animation is reset or the user scrolls back to a previous section.

I also tried disable the Observer logic directly in the onComplete function to be able to start the Zoom Animation, but i could not re-enable it again to scroll back to previous section

Can anyone help me? thank you.

See the Pen OJeevrx by nourB (@nourB) on CodePen.

[mvaneijgen]

Hi @FC-Nour welcome to the forum!

 

Have you seen the following example, it is the bare minimum amount of code to get this effect to work. I would start comparing it to your setup and see what it is you're missing. Try console.log() things to see if the logic the code is doing corresponds with what you think it is doing. Hope it helps and happy tweening! 

 

See the Pen oNQPLqJ?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

[FC-Nour]

Thanks! @mvaneijgen

 

I followed your Suggestion and it works for me on Desktop, but there is a Problem with scrolling in iOS Safari. On mobile, the scroll direction feels reversed. I need to swipe down (from top to bottom) to move to the next section, instead of the usual swipe up (from bottom to top). How can I fix this so that swiping up moves to the next section?

Also when I scroll up at the top of the page in iOS Safari, the page reloads (pull-to-refresh). Is there a way to disable this behavior within my GSAP scroll animation?

Thank you in advance! 🙂
 

[Rodrigo]

Hi,

2 hours ago, FC-Nour said:

Is there a way to disable this behavior within my GSAP scroll animation?

For that you can use normalizeScroll like this:

if (ScrollTrigger.isTouch === 1) {
  ScrollTrigger.normalizeScroll(true);
}

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

As for the demo, we'll take a look at it and report back.