Reset "X" Variable on Page Load for Pinned ScrollTrigger Width

[pietM 24 Likes (Newbie)]

Hi everyone!

 

Like some on this forum, I use swup for site pagination. 

I reset scripts with wrapping functions and an EventListener when content is replaced: 

ex: 

smoothscroll();        
document.addEventListener('swup:contentReplaced', smoothscroll);

This is a great way to re-initiate / replace all of my GSAP timelines after page transitions complete. 

 

But, for some reason, I can't get the the "x" width (below) for the enclosed pin to reset once I've transitioned to a new page. Everything else works: The scroll, the animations, the pin, etc. Just missing the width! 

 

x:() => -(maxWidth - window.innerWidth), 
end:() => maxWidth - document.documentElement.clientWidth + port.offsetWidth

As always, any advice greatly appreciated. 

Thanks! 

 

See the Pen qBqXOPQ by evryali (@evryali) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

It looks like the demo is working to me. What's not working about it?

[ZachSaucier 7,162 Likes (Superhero)]

Oh, are you saying the demo works fine but it doesn't work when you do the same thing but with Swup involved?

 

I'm guessing that's because you didn't remove the relevant event listeners. But it's impossible to say for sure without seeing the full code.

[pietM 24 Likes (Newbie)]

Thanks for reviewing, Zach. 

 

That's right. On initial load, all works well. On page load, I lose the trigger width only.

Everything else works perfectly. 

 

Thanks again. 

 

[pietM 24 Likes (Newbie)]

Following up here, as I still can't figure out why the width doesn't refresh on page load. 

I have enclosed a vid with a live example to better illustrate the issue. The scrollTrigger progress appears in the upper right corner. 

Am I not "killing" / "destroying" the scrollTrigger instance correctly? 

 

My pen is above.

Thanks for all, 
M

 

[akapowl 5,491 Likes (Superhero)]

 

Hey @pietM

 

5 hours ago, pietM said:

Am I not "killing" / "destroying" the scrollTrigger correctly? 

 

That's actually hard to tell without seeing the full code, as Zach already mentioned - in your codepen demo you don't have any killing/destroying going on.

 

Have you tried a method similar to what is described in this thread (which is for barba - but I guess the core concept would apply for swup, too) ?

I don't think a simple re-initiation as you described in your original post will be enough, you will also have to make sure to kill the old ScrollTriggers - and it would probably also be best to destroy the old locomotive-scroll instance before creating a new one.

 

 

 

 

I'll also link to the recently added section in the most common ScrollTrigger mistakes article, so any future readers who stumble upon this and don't know why that is neccessary can get a quick explenation on that.

 

 

 

 

[pietM 24 Likes (Newbie)]

Finally following up here. Your feedback put me on the right path. Thank you! 

 

Though this isn't entirely GSAP-related and more a swup issue, it was helpful to learn why one needs to kill the ScrollTrigger events and destroy / update the LocomotiveScroll while transitioning between pages. In the end, updating / destroying the triggers + the scroller with swup events solved my problem: 

 

document.addEventListener('swup:transitionEnd', (event) => {
locoScroll.update();
});

document.addEventListener('swup:willReplaceContent', (event) => {
ScrollTrigger.getAll().forEach(t => t.kill());
locoScroll.destroy();
animation   
});

 

Hope this helps anyone dealing with the same issue. 

Thanks again for all the help. 

M