The right way using gsap context in vue or nuxt project?

[Reksa Andhika]

Hi, actually just quick question, because this can be change my behavior in future on writing gsap code.

In gsap context docs, mostly the docs only show use case for react, meanwhile, I'm using vue/nuxt 3.

So I have a question especially on reverting the context,  which one is the right one?

Example 1: 


Example 2 (define ctx variable outside and call the revert onUnmounted):


Or maybe there's a better way to code than these examples?

Thank you.

[mvaneijgen]

 

Seems correct to me. We've Stackblitz starter templates for all the major frameworks. See here the once for Vue and Nuxt. 

[Rodrigo]

Hi,

 

The second approach is the one that will work actually. This is a React pattern (although is also used in Svelte as well):

onMounted(() => {
  // rest of your code
  return () => console.log("this doesn't work in Vue"); // this won't be executed when the component is unmounted
});

Finally there is no need to turn the GSAP Context instance into a reactive property using ref():

let ctx;

onMounted(() => {
  ctx = gsap.context(() => {});
});

onUnmounted(() => {
  ctx && ctx.revert();
});

Hopefully this helps.

Happy Tweening!