Gsap installation in nuxt3

[Md Helal Uddin]

nuxt3 has been released recently. Can someone please describe the installation process of gsap in nuxt3? 

TIA

[Cassie]

Hey there!

 

Maybe this forum thread will be of some use.
 

Alternatively, if Nuxt 3's setup differs in some way to Nuxt 2, it may be worth popping into the Nuxt discord and asking some experts there. GSAP's core files don't differ in any way from any other modules, so you would just install them however Nuxt recommends!

https://discord.gg/ANE2AvgK

 

 

Here's our install helper too.

https://greensock.com/docs/v3/Installation

 

[Jojo001]

I am subscribing to this. 

[Rodrigo]

Hey everyone!

 

Exciting times are ahead with the official launch of the first stable version of Nuxt3 a couple of weeks ago.

 

Here in GSAP Towers we want to give all of our users the best possible support, that's why we have this brand new GSAP Starter Template for all of you so you can see a simple setup for using GSAP in your Nuxt apps and sites:

 

https://stackblitz.com/edit/nuxt-starter-khrgsj?file=app.vue

 

As you can see it uses GSAP Context for super easy scoping and cleanup in your different Nuxt pages and components. You can learn more about it here:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Let us know if you have any questions, comments or issues.

 

Happy Tweening!

[dumbo]

– used the wrong account and apparently cannot delete this post, sorry! – 

[katerlouis]

Hey folks!

 

Again, long time no read

That's all wonderful news and I have a question

 

I noticed in the nuxt starter template that you made `ctx` a reactive property using `ref()` – Why are you making it reactive? 

[Rodrigo]

Hi @katerlouis,

 

4 hours ago, katerlouis said:

I noticed in the nuxt starter template that you made `ctx` a reactive property using `ref()` – Why are you making it reactive? 

No particular reason, just wanted something that is kept through re-renders and accessible in the entire code, just that. Since there are no associated effects to the GSAP Context instance, updating it's value property will not trigger anything.

 

Of course changing it to this will work in the same way:

let ctx;

const toggleTimeline = () => {
  tl.value.reversed(!tl.value.reversed());
};
onMounted(() => {
  ctx = gsap.context((self) => {
    // Add GSAP instances here
  }, main.value) // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

Of course, if anyone finds any issue or performance problem, please report so we can take a good look.

 

Happy Tweening!