scrolltrigger Restarting ScrollTrigger after i18n locale change (Nuxt)

[sammekekko]

<script setup>

const { $gsap, $ScrollTrigger, $SplitText, $ScrollSmoother } = useNuxtApp();

function setupSmoothScroll() {
$ScrollSmoother.create({
smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
effects: true, // looks for data-speed and data-lag attributes on elements
smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
});
}
function setupSplits() {
const paragraph = document.querySelectorAll("p");
const header = document.querySelectorAll("h1, h2");
const parentSplit = new $SplitText(header, {
// type: "words",
linesClass: "split-parent",
});

header.forEach((header) => {
// Reset if needed
if (header.anim) {
header.anim.progress(1).kill();
header.split.revert();
}

header.split = new $SplitText(header, {
type: "lines,words",
linesClass: "split-line",
});

// Set up the anim
header.anim = $gsap.from(header.split.words, {
scrollTrigger: {
trigger: header,
toggleActions: "restart pause resume reverse",
start: "top 120%",
},
duration: 0.7,
ease: "circ.easeOut",
yPercent: 100,
opacity: 0,
stagger: 0.015,
});
});

paragraph.forEach((paragraph) => {
// Reset if needed
if (paragraph.anim) {
paragraph.anim.progress(1).kill();
paragraph.split.revert();
}

paragraph.split = new $SplitText(paragraph, {
type: "lines,words,chars",
linesClass: "split-line",
});

// Set up the anim
paragraph.anim = $gsap.from(paragraph.split.words, {
scrollTrigger: {
trigger: paragraph,
toggleActions: "restart pause resume reverse",
start: "top 120%",
},
duration: 0.5,
ease: "circ.easeOut",
yPercent: 100,
opacity: 0,
stagger: 0.015,
});
});
}

onMounted(() => {
setupSmoothScroll();
$ScrollTrigger.addEventListener("refresh", setupSplits);
setupSplits(); 
});

const route = useRoute();

watch(
() => route.path,
() => {
$ScrollTrigger.refresh();
}
);
</script>

I am trying to restart ScrollTrigger when there is a locale change, because otherwise there is no animation for my text when the language is changed.

My code where I have done the animations with scrolltrigger (default layout) ^^.

I have tried:
* Making a watch function for language change and restarting ScrollTrigger(does not work because the text is too quick to change to the other language resulting in the text being static. It does work when I make a timeout, but this results in the text being static for a quick period of time and then the animation begins.

* Restarting ScrollTrigger when you press the locale change button (same issue as above)

* Scoured the internet and found nothing that would help exactly my situation...

Here I have a video where I first show what it should look like, and then what it looks like.
 

[Rodrigo]

Hi @sammekekko and welcome to the GSAP forums!

 

Thanks for being a business user and supporting GSAP! ?

 

Yeah, this seems more a requirement of the i18n API more than anything, basically something (callback or some reactive property) that tells you when the language switch is completed in order to create the animations again.

 

I don't have time now to create a full example of this, but my guess is that these type of packages don't create a full re-render of the components, meaning that they don't remove the current DOM elements and replace them with new ones. As far as I can remember i18n packages just replace the content of those DOM elements (based on JSON files that contain the texts for each language).

 

Are you 100% sure that the watcher you have in place is working? I mean have you added some console logs in it in order to check if the watcher is actually running?

 

Maybe you can setup a watcher for the locale route instead:

https://i18n.nuxtjs.org/api/composables#uselocaleroute

 

Also digging a bit more into this I found this:

https://i18n.nuxtjs.org/guide/runtime-hooks

 

Here is an example of how is used:

https://stackblitz.com/edit/nuxt-starter-avudph?file=pages%2Findex.vue,plugins%2Fi18n.ts

 

You could use that with a global composer or directly from the nuxtApp instance in your component.

 

Hopefully this helps.

Happy Tweening!

[sammekekko]

2 hours ago, Rodrigo said:

Hi @sammekekko and welcome to the GSAP forums!

 

Thanks for being a business user and supporting GSAP! ?

 

Yeah, this seems more a requirement of the i18n API more than anything, basically something (callback or some reactive property) that tells you when the language switch is completed in order to create the animations again.

 

I don't have time now to create a full example of this, but my guess is that these type of packages don't create a full re-render of the components, meaning that they don't remove the current DOM elements and replace them with new ones. As far as I can remember i18n packages just replace the content of those DOM elements (based on JSON files that contain the texts for each language).

 

Are you 100% sure that the watcher you have in place is working? I mean have you added some console logs in it in order to check if the watcher is actually running?

 

Maybe you can setup a watcher for the locale route instead:

https://i18n.nuxtjs.org/api/composables#uselocaleroute

 

Also digging a bit more into this I found this:

https://i18n.nuxtjs.org/guide/runtime-hooks

 

Here is an example of how is used:

https://stackblitz.com/edit/nuxt-starter-avudph?file=pages%2Findex.vue,plugins%2Fi18n.ts

 

You could use that with a global composer or directly from the nuxtApp instance in your component.

 

Hopefully this helps.

Happy Tweening!

Thanks so much for the info! I have tried the following stuff, but I realized that I probably will have to do some whole page loading animation as a loader instead. It will look great and fix my issue!