Gsap ScrollTrigger Snap disturbing whole app

[Ahmad-dev]

Gsap ScrollTrigger Snap disturbing the whole app while I'm a using it only in a single component
It snaps different sections automatically up and down
is there any solution for this?

 

const panels = gsap.utils.toArray("#panels-container .panel");

tween = gsap.to(panels, {

xPercent: -100 * (panels.length - 1),

ease: "none",

scrollTrigger: {

trigger: "#panels-container",

pin: true,

start: "top top",

scrub: 1,

snap: {

snapTo: 1 / (panels.length - 1),

inertia: true,

duration: { min: 0.1, max: 0.1 },

},

end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)

}

});

[Cassie]

Hey there!

It's very hard to see what's happening from a small code snippet.

As we mention in the forum guidelines, we can usually help more effectively if you provide a minimal demo, codepen is great for this.

 

Thanks!

 

[GreenSock]

Yeah, a minimal demo will definitely be necessary to know for sure, but this sounds like either you forgot to kill() the ScrollTrigger when you reroute (are you using a framework like Nuxt/React or something?) or you're misunderstanding how snapping gets applied and have that ScrollTrigger set up in an area on the screen that you don't actually want snapping to occur. Again, very difficult to know without seeing a minimal demo. But if you're rerouting to a different page without the normal browser redirect, definitely make sure you .kill() that ScrollTrigger instance.