Jump to content


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

Moderator Tag

Recommended Posts

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: 


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. 



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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 


Link to comment
Share on other sites

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, 


Link to comment
Share on other sites


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.





  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

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) => {

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


Hope this helps anyone dealing with the same issue. 

Thanks again for all the help. 




  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.