Pin section flickering with Scrolltrigger and smooth-scrollbar

[kosmo]

Hello all ,

 

I'm on a new version of our site for the agency.

 

We currently have this library in addition to GSAP, scrolltrigger etc: https://github.com/idiotWu/smooth-scrollbar

 

I have a section on home where I pin using Scrolltrigger, except I get flickering when I scroll and I can't fix it.

 

I read all the topics that were related to this problem (https://greensock.com/forums/topic/26008-scrolltrigger-flickering-when-pinned/)

 

I can not understand where the problem comes from because I put the right thing.

 

I made a video for you to see because the site is local : https://e-kosmo.com/problem-pin.mp4

 

pinType > fixed doesnt work

pinType > 'transform' work with flickering

 

ScrollTrigger.create({
            trigger: this.$target,
            refreshPriority: 0,
            invalidateOnRefresh: true,
            pin: this.$wrapper,
            pinType: typeof window.SB !== 'undefined' ? 'transform' : 'fixed',
            //pinType: document.querySelector(".scroll-content").style.transform ? "transform" : "fixed",
            //pinType: 'fixed',
            pinSpacing: 'margin',
            anticipatePin: 1,
            scrub: 0.5,
            start: "bottom bottom",
            end: '+=2700',
        });

 

 

Thank you in advance for your help and feedback

 

Nickolas

[Shaun Gorneau]

Any chance you could send a URL to the project? Even if in a private message. I have a feeling this is rubber banding in Mac OS ... are you testing this on a Mac and, if so, which browser(s)?

[kosmo]

Hello @Shaun Gorneau and thank you for your response.

 

So yes I'm on macOS. I develop on firefox dev, I have the problem on this browser but also on chrome and safari.

 

Yes I can give you a private URL if you wish !

 

thanks again for your help

[kosmo]

Hello @Shaun Gorneau and all,

 

I found my problem So here is what I did :

 

ScrollTrigger.create({
            trigger: this.$target,
            //refreshPriority: 0,
            invalidateOnRefresh: true,
            pin: this.$wrapper,
            //pinType: typeof window.SB !== 'undefined' ? 'transform' : 'fixed',
            //pinType: document.querySelector(".scroll-content").style.transform ? "transform" : "fixed",
            pinType: "transform",
            //pinSpacing: 'padding',
            preventOverlaps: true,
            anticipatePin: 1,
            scrub: 0.5,
            start: "bottom bottom",
            end: '+=2700',
            //end: () => "+=" + innerHeight,
            markers: true,
            onEnter: function () {
                window.SB.setMomentum(0, 0);
                window.SB.options.damping = 10;
            },
            onEnterBack: function () {
                window.SB.setMomentum(0, 0);
                window.SB.options.damping = 10;
            },
            onLeave: function () {
                window.SB.options.damping = 0.12;
            },
        });

I realized that with the value at 10 in damping my problem disappeared.

 

So i paused smoothscrollbar by re-entering the section once scrolltrigger throws the pin.

 

And the same when you get back into the section

 

Thank you