So after a bit of investigation, I've found the source of the issue, although don't fully understand why...
To answer your other Qs though:
Yes latest version of GSAP & ScrollSmoother (3.11.5)
I've not tested without SWUP, as initial page loads are always fine, so the issue lays as a combo between the two.
I tried out .context, but it gave me a few scoping issues, so I tried out another approach below.
I stripped all the code way back to the basics to just allow page transitions with GSAP and SWUP, and the issue disseapeared.
As I added the various functions in one by one I found that the issue returned as soon as I started using: smoother.paused(true/false).
I had the following; I used .get() to find the SS instance and pause scrolling, so an intro vid/anim would play, and then unpause. No issues with that.
The SWUP code after then also paused and un-paused the instance when transitioning between pages (to stop people scrolling the page as it loaded in the background, leaving them halfway down a page and being confused).
if (ScrollTrigger.isTouch !== 1) {
const smoother = ScrollSmoother.get();
smoother.paused(true);
}
// later on down the file
// SWUP handling of transition out (simplified)
const outPage = (next) => {
smoother.paused(true);
var tl = gsap.timeline({
onComplete: next
})
}
// and then in (simplified)
const inPage = (next) => {
smoother.paused(false);
}
// SWUP stuff just for ref
const pageAnimation = [{
from: '(.*)',
to: '(.*)',
in: function(next) {
inPage(next);
},
out: (next) => {
outPage(next);
}
}];
const swup = new Swup({
plugins: [
new SwupJsPlugin(pageAnimation),
]
});
Essentially, I needed to define a new smoother variable using get() for the outPage and inPage variables like below.
The browser didn't flag it as an issue previously, because I guess it could always reference the original 'smoother' variable, even though it was being killed and then re-created on every page load.... so pretty basic JS error on my side!
// transition out
const outPage = (next) => {
const smoother = ScrollSmoother.get();
smoother.paused(true);
var tl = gsap.timeline({
onComplete: next
})
}
// transition in
const inPage = (next) => {
const smoother = ScrollSmoother.get();
var tl = gsap.timeline({
onComplete: next
})
smoother.paused(false);
}
As to why it made the page scroll faster... I'm really not sure.
One odd thing I found though, is that after using .kill(), if I ran a console.log of smoother, it would still log something, as opposed to undefined, which somewhat suggests it wasn't being killed.
Anyways, thanks so much again for your time in responding
