Pinned elements jumps on trigger

[nurlan]

Hello there! I'm new at GSAP and ScrollTrigger animations. So i have issue: when 2 elements starts to pin, they just jump. You can see it only when using mouse. Laptop gesture scroll works smooth.

my code:

gsap.timeline({

        scrollTrigger: {

            trigger: '.benefits__title',

            start: `top top`,

            end: '+=5000',

            pin: '.benefits__title',

            pinSpacing: false,

        }

    })

 

    gsap.timeline({

            scrollTrigger: {

                trigger: '.benefits__slider',

                start: '25% center',

                end: '+=5000',

                pin: true,

            },

        })

        .to('.benefits__slider-item--1', {

            opacity: 0,

            ease: 'slow',

        })

        .from('.benefits__slider-item--2', {

            opacity: 0,

            ease: 'slow',

        })

        .to('.benefits__slider-item--2', {

            opacity: 0,

            ease: 'slow'

        })

        .from('.benefits__slider-item--3', {

            opacity: 0,

            ease: 'slow',

        })

        .to('.benefits__slider-item--3', {

            opacity: 0,

            ease: 'slow'

        })

        .from('.benefits__slider-item--4', {

            opacity: 0,

            ease: 'slow',

        })

        .to('.benefits__slider-item--4', {

            opacity: 0,

            ease: 'slow'

        })

        .from('.benefits__slider-item--5', {

            opacity: 0,

            ease: 'slow',

        })

 

https://web.codeunion.kz/ (4th section)

 

Thanks to any help! And sorry for my bad english)

[PointC]

Have you tried anticipatePin?

 

anticipatePin

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[nurlan]

3 hours ago, PointC said:

Have you tried anticipatePin?

 

anticipatePin

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

Yes i do. It did not give any results

[GreenSock]

I wasn't able to notice any jumps, but I'm sure I'm missing something. We can't really troubleshoot live site - there are too many factors at play. If you need help, please provide a minimal demo (like in CodePen) and we'd be happy to look at it.