ScrollTrigger with Nuxtjs

[sixindustries]

There is a lot on the net about how Nuxt and ScrollTrigger have issues if the route changes. When you navigate to a route for the first time, the ScrollTrigger operates as it should. Also, if once the route has changed, and you refresh the page, ScrollTrigger animations also work properly but obviously that defeats the purpose of a single page app.

I've tried using the beforeDestroy hook to run:
this.$ScrollTrigger.refresh();

But this does nothing. Is there a different method that needs to be used to reset ScrollTrigger?

[ivodolenc]

Try searching the official gsap forum and the nuxt/vue github issue for similar reports.

There is a confirmed bug in Vue 3 if page transitions are used, which leads to problems in the onMounted hook, so a workaround should be used.

Also try with nextTick, setTimeout workaronds or disable global page transitions. That's the first thing that comes to my mind.

The easiest way to check if everything is working properly is to try a simple sample code in a vanilla js project. If it works then most likely the problem is in vue/nuxt. That way you know exactly what to look for.