GSAP ScrollTrigger Pin / Scrub with FullPage JS not working

[NaimeshRao]

Hi There,

 

I am trying to use section scrolling using FullPage JS as per project requirements, But the thing is I have to use GSAP Animations as well including ScrollTrigger Pin | ScrollTrigger Scrub, but that not working with FullPage JS.

 

Can you please look into an issue and give me feedback regarding this.

 

Thanks in advance!

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

We don't support 3rd party libraries like FullPage.js, sorry.

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. But again, if it's more about FullPage.js, that's not really something we can help with.

[NaimeshRao]

Hello Helper,

 

Thanks for the feedback, I have one more concern

 

If I use CSS Snapping Method like ScrollTrigger Demos in GSAP Website like link below.

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

Then ScrollTrigger Pin is working fine with snap,
But how can I use ScrollTrigger Scrub in the same situation for any of the snap section?

Please give me suggestion for this.

Thanks in advance again.

[Cassie]

Hey there!

 

You should just be able to set scrub:true on any scrollTrigger.

Could you provide an example of it not working and explain what your dilemma is? Thanks!

[jdabs]

Hello,

 

First time on the forums.

 

I believe I have the same issue as NaimeshRao.

 

The pin triggers after you scroll past the slide you are trying to pin. (See the onEnter callback in the console - fires with the onLeave callback). It happens as quick as the scroll snapping, too quickly.

 

See the Pen ZExwXJy by jdabgotra (@jdabgotra) on CodePen

 

Here is the pin working fine (without any full page snapping using css):

 

See the Pen ZExwZWd by jdabgotra (@jdabgotra) on CodePen

 

So you can imagine what I'm trying to achieve -- the combination of both pens. 

 

I've tried setting the scroller element's scroll-snap-type css to none when the pinned slide comes into view, and setting it back to y mandatory when leaving the slide, which I got sort of working:

 

See the Pen GRxzLjO by jdabgotra (@jdabgotra) on CodePen

 

The problem is:

 

- In Firefox, the pinned section stutters while scrubbing. The toggling of scroll-snap-type property works well.

- In Chrome/Webkit, the pinned section scrubs smoothly, but toggling scroll-snap-type breaks when going to Section 4. Seems setting scroll-snap-type to y mandatory is implemented differently in Chrome than Firefox, with an initial delay.

 

I've also tried using FullPage.js and ScrollTrigger pinning but they don't seem to play well together here.

 

Thanks for any help!

[Cassie]

Hey there!

 

The triggers are exactly where you've placed them.
 

 It's just jumping past that section because the CSS is 'snapping' immediately to the next one. So nothing surprising here really.

 

Quote

I've tried setting the scroller element's scroll-snap-type css to none when the pinned slide comes into view, and setting it back to y mandatory when leaving the slide, which I got sort of working:

 

I like this solution! But the fact that you're using onScroll and boundingClientRect feels a bit fishy when you could just use ScrollTriggers events.

Maybe this is better?

 

See the Pen abYMoBL?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Otherwise, maybe give this thread a read.
 

 

Hope this helps!

[jdabs]

Thanks Cassie!! That -1px trick fixes things in Chrome, and allows me to use the callbacks instead of the listening for scroll events.

 

The only thing is that in Firefox it is stuttering (in Chrome its perfect now!). Perhaps something is up with my scroller container? It seems the scroller option does need to be set for it to work.

 

Thanks again. You've made my day better!

[Cassie]

How's this on firefox?

https://cdpn.io/pen/debug/ZExPXWW

 

(using the latest version)

[jdabs]

Unfortunately it's still stuttering in Firefox. You can see the markers bouncing for a fraction of a second.

 

 

 

[Cassie]

I can't recreate that my side. How is it without CSS scroll snapping?

 

https://cdpn.io/pen/debug/jOzJRGQ
 

[jdabs]

Without CSS scroll snapping, there doesn't  does appear to be stuttering, in that link.

[Cassie]

righty ho, we're looking into it 👀

[GreenSock]

This looks to me like it's just how the browser behaves when you toggle scroll snapping on/off. There's a logic issue where you've got your ScrollTrigger set up at a certain spot and it's toggling things properly but when you re-enable it (in the backwards direction in this case), it immediately jumps to the closest snapping point which then triggers the ScrollTrigger to toggle again, etc. It doesn't seem like a very safe thing to do in my opinion. You could use ScrollTrigger's snap features instead of CSS, but I realize that feels very different because it must wait for scrolling to stop before it kicks in (we don't want to hijack things when a user is actively scrolling).