How to update the w--current class in Webflow after the page loads using Swup?

[ViniciusMoreira33]

I making my new webflow website and I am implementing swup.js. Everything works fine, except when I try to animate the current state of a nav link. Since I am using Swup to handle all transitions, when a click on a nav link and go to a different page, the w--current class that Webflow automatically adds to the current page, does not do that anymore. I tried reading the docs but couldn't solve this issue.

My current swup code is just: (via script)

const swup = new Swup();

Anyone can help?

[daun]

You can use the morph plugin for that type of thing. It will carry over any changed classnames and attributes. Assuming your content is in #content and you nav is in #nav:

const swup = new Swup({
  containers: ['#content']
  plugins: [
    new SwupMorphPlugin({ containers: ['#nav'] })
  ]
})

[ViniciusMoreira33]

hey @daun, thanks for the reply!

I tried your solution, but Webflow doesn't seem to like plugins in their custom code section. I was kinda hoping for a hard code solution in js or jquery

[daun]

If you're including swup from a script tag, you can do the same for any plugin.

[ViniciusMoreira33]

basically, i was able to reload webflow inside the init function of swup. Now everything works.

Thanks again for helping out!

[daun]

Great!