Swup With Smooth Scrolling Plugin Issue

[Juka99]

Hello everyone,

I am making a website where I implemented Swup as well as Butter.js for smooth scrolling on my website.

I ran into a very strange issue.

Basically, here is how I initialize my Butter.js script :

var options = {
wrapperId: 'butter',
wrapperDamper: 0.01,
cancelOnTouch: true
};

butter.init(options);

The "wrapperDamber" option basically determines the speed of scroll smoothnes, the lower the number is, the longer the animation will be for smooth scroll. This part of code also runs every time swup.on('contentReplaced') happens.

Here is my issue :

When I go from my index.html page to, for example, shop.html, and then maybe return to index.html, my smooth scrolling animation will be a little faster. Each time I repeat this, the smooth scrolling animation will be faster and faster until its not even smooth scroll animation, its just a regular scroll. I tried commenting out the swup code, and everything works fine then.

I understand that probably not many people used butter.js, but does anyone have some idea on why this is happening or how I can fix it ? :)

Thank you so very much for any answers.

EDIT :

I solved it !!!

If anyone runs into this issue, here is how I solved it.

In my script, I added this code :

swup.on('willReplaceContent', function() {
butter.cancel();
});

This basically destroyed the current instance of my butter script, and this event happens before "contentReplaced".

So you can just destroy the instance of your plugin inside swup.on('willReplaceContent'), and then re-initialize it inside swup.on('contentReplaced').

[daun]

Great that you found a solution! Never used butter, but what happens if you only ever run the init code once and not repeat the init step on every contentReplaced event? Should be the same as continually cancelling and restarting.

[Juka99]

In that case, the smooth scrolling only works until I change the page. Once I do, it never works again.

I am not 100% sure how Swup works, but from my previous experiences using it, I usually put my whole init() function to run on contentReplaced, otherwise it works only once, when I change the page, the JS will not work. Basically 'contentReplaced' is made for that case as I understood from reading the documentation. For example, I also have a script that adds some stylings to the navigation once its scrolled to the certain point. I also need to execute this script every time 'contentReplaced' happens, or it wont work. I guess thats just how Swup does it.

I am glad I found about 'willReplaceContent' as well, which seems to run right before 'contentReplaced', which is perfect for my case.
It reminds me of life cycles in Vue.js, like you have beforeMounted() and mounted(), etc ...

If you maybe know more about why Swup behaves like this, let me know. :)

EDIT :
It's possible that this issue would happen with many other libraries or plugins, not just with smooth scrolls, maybe even carousels, etc ... so they should probably always be destroyed on 'willReplaceContent', and then re-initialized again on 'contentReplaced', to ensure that the behavior is expected.

[daun]

You're definitely doing it right by hooking into those two events. Depending on how you set up your event handlers, running the code once could work. But it's up to each library how and when to attach the handlers, so you're on the safe side here!

[Juka99]

Thank you sir, I also think this is good enough. It also works if I destroy the current instance of my smoothScroll function in 'contentReplaced', before invoking the init() function. But I just think that solution with 'willReplaceContent' is a little more logical and organized, so I'll go with it. :)