Jump when using scrolltrigger in google chrome

[Klyuk88]

Sometimes, when scrolling the page, the block with the command jumps. What could be the problem? Help please.

Recording screen

Page with bug

 

    if (window.innerWidth >= 1200) {
        try {
            function scrollTeam() {
                const teamWrap = document.querySelector('.team-wrap');
                const teamSec = document.querySelector('.team');
                const containerWidth = document.querySelector('.team-sec').clientWidth;
                const teamWrapWidth = teamWrap.clientWidth;


                if (teamSec && (teamWrapWidth > containerWidth)) {
                    const viewPartOfTeamWrap = teamWrapWidth - containerWidth;

                    let tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: teamSec,
                            start: 'top top',
                            scrub: 1,
                            anticipatePin: 1,
                            pin: true
                        }
                    })


                    tl.to(teamWrap, {
                        x: -(viewPartOfTeamWrap + 30)
                    })
                }
            }
            scrollTeam()

        } catch (error) {
            console.log(error);

        }
    }

 

[Cassie]

Hey there @Klyuk88!

We can usually help more effectively if you provide a minimal demo, codepen is great for this.

It's quite hard to debug without the relevant markup and styles included.