ScrollTrigger Jumps on Horizontal Scroll

[neontrenton]

Hello.

 

I'm using Scrolltrigger for achieving horizontal scroll sections here: https://sco2023p3.wpengine.com/

 

It works perfectly whenever I hard refresh the page. However, I'm running into a minor issue when refreshing the page (not a hard refresh). After refreshing the page, these sections "jump" slightly whenever you scroll to them. Not sure what is causing this since my browser hasn't resized or anything.

 

I tried replicating the issue in Codepen but can't seem to replicate it.

 

Here's my current JS. Does anyone have an idea of what might be causing this issue and how I can fix it?

 

gsap.registerPlugin(ScrollTrigger);

 

ScrollTrigger.matchMedia({

 

// large

"(min-width: 992px)": function() {

// setup animations and ScrollTriggers for screens 960px wide or greater...

// These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.

 

// Value Props Section Animation

let containerhrz1 = document.querySelector(".hrz-container.hrz1");

let sectionshrz1 = gsap.utils.toArray(".hrz-container.hrz1 .doc");

let tl1 = gsap.timeline({

scrollTrigger: {

pin: true,

scrub: 1,

trigger: containerhrz1,

invalidateOnRefresh: true,

end: "+=500%"

}

});

 

tl1.to(sectionshrz1, {

x: () => -(containerhrz1.scrollWidth - document.documentElement.clientWidth) + "px",

duration: 1,

ease: "none"

}, 0.05);

tl1.to({}, {duration: 0.1});

 

// Steps Section Animation

let containerhrz2 = document.querySelector(".hrz-container.hrz2");

let sectionshrz2 = gsap.utils.toArray(".hrz-container.hrz2 .review");

 

let tl2 = gsap.timeline({

scrollTrigger: {

pin: true,

scrub: 1,

trigger: containerhrz2,

invalidateOnRefresh: true,

end: "+=500%"

}

});

 

tl2.to(sectionshrz2, {

x: () => -(containerhrz2.scrollWidth - document.documentElement.clientWidth) + "px",

ease: "none"

}, 0.05);

tl2.to({}, {duration: 0.1}); // add some padding at the end.

 

// Steps Section Animation

let containerhrz3 = document.querySelector(".hrz-container.hrz3");

let sectionshrz3 = gsap.utils.toArray(".hrz-container.hrz3 .step");

 

let tl3 = gsap.timeline({

scrollTrigger: {

pin: true,

scrub: 1,

trigger: containerhrz3,

invalidateOnRefresh: true,

//end: () => "+=" + (containerhrz2.scrollWidth - document.documentElement.clientWidth),

end: "+=500%"

}

});

 

tl3.to(sectionshrz3, {

x: () => -(containerhrz3.scrollWidth - document.documentElement.clientWidth) + "px",

ease: "none"

}, 0.05);

tl3.to({}, {duration: 0.1}); // add some padding at the end.

 

 

},

 

});

[Rodrigo]

Hi,

 

You seem to be using Lenis, you have a business license, why not use ScrollSmoother?

 

The issue here seems to be that something is getting cached and interfering with ScrollTrigger calculations, that's why a hard refresh fixes the issue.

 

Maybe wrap all your code in a load event in order to be sure that everything is loaded:

window.addEventListener("load", () => {
  // GSAP code here
});

Unfortunately without a minimal demo there is not much we can do. If possible try to create a demo that recreates the problem so we can have a better look.

 

Sorry I can't be of more assitance.

Happy Tweening!