Vertical scroll snap with ScrollTrigger infinite bouncing

[N00R28]

Hello,
 

I'm new to GSAP, and I'm trying to implement scroll snap using ScrollTrigger and ScrollTo in my Vue.js (Nuxt) project.
 

It works as expected, but I encounter an issue with infinite bouncing between sections when I refresh the website.
I have to close the tab and reopen it to fix it (sometimes refreshing also fixes the issue).
 

The same thing happens if I keep scrolling up and down between two sections multiple times or if I scroll quickly in one direction.

this is a sample of the project.
https://codesandbox.io/p/devbox/async-platform-8nhrsl

[Rodrigo]

Hi,

 

This looks odd to me:

function scrollToSection(el) {
  if (process.client) {
    nextTick(() => {
      $gsap.to(".main-sections-container", {
        duration: 1,
        scrollTo: { y: el },
      });
    });
  }
}

Why you have the GSAP instance inside the NextTick callback? The NextTick callback is only needed when you have to wait for a DOM update to be completed after a reactive property or prop is updated and if that property/prop actually has an effect on the DOM of course. That doesn't seem to be the case in your demo. If possible please create a demo in Stackblitz:

https://stackblitz.com/

 

Is clear that there is an endless loop running there, unfortunately I'm on my laptop right now and can't edit your sandbox here for some reason I can't really figure, so I'll try again tomorrow morning. In the mean time get rid of the nextTick method and just use the gsap.to() method directly.

 

Finally the package you're using to abstract GSAP is using an outdated version of GSAP:

    "node_modules/@hypernym/nuxt-gsap": {
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/@hypernym/nuxt-gsap/-/nuxt-gsap-2.4.2.tgz",
      "integrity": "sha512-Oep+0ABn58PbJo4tX8A8ja2hGjjBtyFE7DJAF/q8DIDGXMFaZlTbvcreCmMdKhuJ5NR8ODE0fEObUEYci901gg==",
      "dev": true,
      "dependencies": {
        "gsap": "^3.12.2"
      },
      "funding": {
        "url": "https://github.com/sponsors/ivodolenc"
      }
    },

Right now we're on version 3.12.5, so maybe that could factor into this. We understand that using this package simplifies things, but honestly I don't see what's the issue with importing and registering the plugins in different files, Is this considered a bad practice? Is this just annoying? I have not problem with that TBH, but that's just me 🤷‍♂️

 

Hopefully this helps

Happy Tweening!

[Rodrigo]

Hi,

 

I'm curious about why you're using the scroller option in the ScrollTrigger config. Any particular reason for not using the default window scroller? Also the issue seems to be caused by the fact that the onEnter and onEnterBack of different ScrollTrigger instances are being triggered at the same time. Maybe using onToggle would be a better option:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#onToggle

 

Maybe having a look at this demo could help you:

See the Pen WNWPKBp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[N00R28]

Hi, 
thanks for the reply.

Regarding the NextTick callback, if you refresh, wait a sec and then scroll it won't start looping. However, if you start to scroll after refreshing immediately it will start looping so I added NextTick hoping it fixes the loop on refresh. I thought something was not mounting correctly or there was a delay of some sort. (didn't make a difference😅)

I used this package because I kept getting an error trying to import GSAP and I saw the package before I could resolve the issue so I just went with it. didn't know it used an outdated version.

For the Scroller option, I originally implemented this without scroller option and used the default window scroller and that's when I ran into the issue. I added a container with 100vh height and attached the scroller to it just to debug and see if it makes any difference. 

I used onEnter and onEnterBack because it fitted my requirement and required less config. I will go ahead and try it with onToggle.

Stackblitz demo
https://stackblitz.com/edit/nuxt-starter-nzylkf?file=app.vue

Thanks