1. Install GSAP

Installiere GSAP in deinem Projekt, um darauf zugreifen zu können. Dafür nutze ich in diesem Tutorial npm.

npm i gsap

2. Create a Plugin

Damit GSAP im gesamten Projekt verfügbar ist, kannst du ein Plugin erstellen. Dazu erstellst du zunächst einen ‘plugins’-Ordner im Root-Verzeichnis deines Projekts und anschließend die Datei gsap.js (den Namen der Datei kannst du frei wählen.

// plugins/gsap.js

import { gsap } from 'gsap';

export default defineNuxtPlugin(nuxtApp => {
  return {
    provide: {
      gsap
    }
  }
})

‍

3. Extract the $gsap property

Dort, wo du GSAP nutzen möchtest, fügst du im Script-Setup-Bereich folgenden Code ein, um die $gsap-Instanz aus der Nuxt-App zu extrahieren und via ‘gsap’ erreichbar zu machen. In diesem Fall ergänze ich diesen Code in meiner DemoComponent.vue. Diese Zeile musst du in jeder Komponente einsetzen, in der du GSAP nutzen möchtest.

// DemoComponent.vue

(…)

‍

4. Add animation onMounted

Jetzt kannst du eine Animation anlegen. Dafür nutzen wir die Hook-Funktion ‘onMounted’, die eine Animation ausführt, sobald die Komponente im DOM eingefügt (also montiert) wurde. Die Timeline kannst du bereits außerhalb der ‘onMounted’-Funktion definieren.

// DemoComponent.vue

(…)

‍

5. Adding a GSAP Plugin

Wenn du ein GSAP-Plugin ergänzen möchtest, kannst du das ganz einfach im erstellten Plugin ergänzen. Dafür kannst du folgenden Code ergänzen:

// plugins/gsap.js

import { gsap } from 'gsap';
import { TextPlugin } from "gsap/TextPlugin";

export default defineNuxtPlugin(nuxtApp => {
  gsap.registerPlugin(TextPlugin);

  return {
    provide: {
      gsap
    }
  }
})

Weitere Schritte sind nicht notwendig. Mit dieser Methode kannst du GSAP in deinem Nuxt-Projekt global zur Verfügung stellen. Danke an Timm, der mir diese Methode initial gezeigt hat.