Nuxt 3 setup with plugins

[iotron]

I have been able to successfully implement gsap in a nuxt 3 plugin with the following steps.
Create a gsap.client.js in plugins folder.

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
import { Draggable } from 'gsap/Draggable'

export default defineNuxtPlugin((nuxtApp) => {
  if (process.client) {
    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Draggable)
  }

  return {
    provide: {
      gsap,
      Draggable,
      ScrollTrigger,
    },
  }
})

and in your app.vue or any vue component.

const { $gsap: gsap, $Draggable: Draggable } = useNuxtApp();

I have been directly using the gsap object instead of using gsap.context. Is these the correct and optimal way to use gsap with nuxt3?

[Cassie]

Hi there!

 

Context is really helpful for cleanup. You can use GSAP without it but you'll have to manually cleanup animations if you remove components

 

Here's some demos that may help you - 

https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

[miguelst]

13 hours ago, Cassie said:

Hi there!

 

Context is really helpful for cleanup. You can use GSAP without it but you'll have to manually cleanup animations if you remove components

 

Here's some demos that may help you - 

https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

How do you mean "remove components", for general purposes is using the plugin method okay? 

[iotron]

18 hours ago, Cassie said:

Hi there!

 

Context is really helpful for cleanup. You can use GSAP without it but you'll have to manually cleanup animations if you remove components

 

Here's some demos that may help you - 

https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

Thank you so much for the examples. I am migrating my project from Nuxt 2 to Nuxt 3, and most of my animations are using the gsap object directly for creating reveal, text, and svg animations. Rewriting the object usage animations to context usage would take extra workload, that's why I took the plugins way to import the gsap/plugin objects and rest of the code works the same. I am not usually removing any components, only adding them incrementally through animations. My objective is to build the app with optimal performance and build size. 

[Cassie]

Sure, it's up to you at the end of the day. Context is just an option to help people write code that's in line with how a lot of frameworks like to structure things.

You still use the GSAP object directly while using context though, context is just a way to group GSAP animations so they can be easily killed if necessary to prevent memory leaks or performance issues. It's not an abstraction.

It is more necessary with React though, Vue is more forgiving!

 

Good luck with your project!

[Rodrigo]

Hi,

 

If your plugin is making the GSAP global constructor available without imports, it would be important for you to document GSAP Context for your users to be aware how to use it with your plugin. At the end of the day they have access to the same functionality and features, right?

 

Basically what you have to do is use that particular gsap instance from your plugin and create a GSAP Context.

 

Just to be sure and give the best possible solutions for everyone, would you be kind enough to fork this GSAP & Nuxt3 template and implement your plugin in it. Don't worry about GSAP Context yet, we'll get to that later, for now I'm interested in how it's implemented in order to see  the next steps:
https://stackblitz.com/edit/nuxt-starter-6nxgbu?file=app.vue

 

Happy Tweening!

[iotron]

17 hours ago, Rodrigo said:

Hi,

 

If your plugin is making the GSAP global constructor available without imports, it would be important for you to document GSAP Context for your users to be aware how to use it with your plugin. At the end of the day they have access to the same functionality and features, right?

 

Basically what you have to do is use that particular gsap instance from your plugin and create a GSAP Context.

 

Just to be sure and give the best possible solutions for everyone, would you be kind enough to fork this GSAP & Nuxt3 template and implement your plugin in it. Don't worry about GSAP Context yet, we'll get to that later, for now I'm interested in how it's implemented in order to see  the next steps:
https://stackblitz.com/edit/nuxt-starter-6nxgbu?file=app.vue

 

Happy Tweening!

Working example of context with gsap imported via nuxt plugin. For gsap club plugin implementation, check the slider page. Let me know if you see any performance issues on the setup.
https://stackblitz.com/edit/nuxt-starter-t4ha6v?file=layouts%2Fdefault.vue,pages%2Findex.vue

[Rodrigo]

Hi,

 

Thanks for the example! ?

 

Indeed as mentioned before your plugin makes the GSAP Core instance available without imports so you can use the same methods and create a context instance as you already did here:

https://stackblitz.com/edit/nuxt-starter-t4ha6v?file=pages%2Findex.vue

 

So it's usage should be similar but without importing the GSAP Core.

 

Happy Tweening!

[miguelst]

On 1/23/2023 at 4:08 PM, iotron said:

Working example of context with gsap imported via nuxt plugin. For gsap club plugin implementation, check the slider page. Let me know if you see any performance issues on the setup.
https://stackblitz.com/edit/nuxt-starter-t4ha6v?file=layouts%2Fdefault.vue,pages%2Findex.vue

Is there a benefit to importing gsap via a plugin? As opposed to a direct import as in the other examples here? Thanks!

[iotron]

6 hours ago, miguelst said:

Is there a benefit to importing gsap via a plugin? As opposed to a direct import as in the other examples here? Thanks!

Benefit: single configuration file(plugin) for gsap

[Rodrigo]

Hi @miguelst,

 

Basically you save yourself from importing the core files over and over in your Vue files, that's it.

 

Of course the plugin could be enhanced in order to simplify other tasks but the main benefit will always be the same, not importing the core and the plugins you use and registering those plugins. Maybe create some low level API for some recurrent tasks and such things.

 

I understand that a new GSAP Module is in the plans of the Nuxt team with Nuxt3.

 

Happy Tweening!

[miguelst]

20 hours ago, Rodrigo said:

Hi @miguelst,

 

Basically you save yourself from importing the core files over and over in your Vue files, that's it.

 

Of course the plugin could be enhanced in order to simplify other tasks but the main benefit will always be the same, not importing the core and the plugins you use and registering those plugins. Maybe create some low level API for some recurrent tasks and such things.

 

I understand that a new GSAP Module is in the plans of the Nuxt team with Nuxt3.

 

Happy Tweening!

Thank you! That makes sense

[Francesco Michelini]

Hi all,

 

I just stumbled upon this exact "problem" with Nuxt 3.1.1, but I've been able to make it work only by omitting the `.client` part in the plugin file name.

 

In my case, importing the SplitText and Draggable plugins made the entire application crash during development because at the very beginning the `window` object is still `undefined` (only on the first page load. instead, when navigating towards a page that used those plugins no errors were thrown).

 

Maybe this will be helpful to others in the future ✌️

 

For reference ?

// /plugins/gsap.js

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { Draggable } from 'gsap/Draggable'
import { InertiaPlugin } from 'gsap/InertiaPlugin'
import { Observer } from 'gsap/Observer'

export default defineNuxtPlugin(() => {
  gsap.registerPlugin(Observer, ScrollTrigger, InertiaPlugin)

  if (process.client) {
    gsap.registerPlugin(Draggable)
  }

  return {
    provide: {
      gsap,
      Observer,
      ScrollTrigger,
      Draggable
    }
  }
})

 

[kobro]

Thanks to Rodrigo for setup code.

 

I had a problem with ScrollTrigger and trigger area if using not fixed size images.
When images are still downloading, ScrollTrigger already sets the wrong trigger area, but it's fine after reloading the page.
So I found a solution to use onNuxtReady instead of onMounted. Maybe it will be helpful to others.

onNuxtReady((app) => {
  console.log("Nuxt ready!");
  gsap.timeline...
})

Put gsap code in callback function and it runs after everything is downloaded.

UsingScrollTrigger.refresh() as a callback for @load event broke native Nuxt scroll behaviour on route changed. For example, navigate to the page that uses refresh() leaves you at the scroll position from previous page.

Nuxt 3.2.3.

[Rodrigo]

Hi,

 

For images a good alternative could be to use Nuxt Image, which is a part of the Nuxt ecosystem and developed by many members of the Nuxt team:

https://image.nuxtjs.org/

 

The API for the two components includes a load event that allows you to keep track of the images loaded state and could be helpful to tell you when you should create your ScrollTrigger instances:

 

As for the scroll position jump you can use ScrollTrigger's clearScrollMemory method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Hopefully this helps.

Happy Tweening!

[iankco]

On 3/14/2023 at 11:20 AM, Rodrigo said:

Hi,

 

For images a good alternative could be to use Nuxt Image, which is a part of the Nuxt ecosystem and developed by many members of the Nuxt team:

https://image.nuxtjs.org/

 

The API for the two components includes a load event that allows you to keep track of the images loaded state and could be helpful to tell you when you should create your ScrollTrigger instances:

 

As for the scroll position jump you can use ScrollTrigger's clearScrollMemory method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Hopefully this helps.

Happy Tweening!

For continuity, the topic indicated Nuxt 3, the nuxt-image package that is compatible with Nuxt 3 is @nuxt/image-edge.