gsap as plugin

fos7er · Oct 31, 2023 · af8f3b6 · af8f3b6
1 parent 49cb9d0
commit af8f3b6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -8,9 +8,7 @@
 </template>
 
 <script setup>
-  import gsap from 'gsap'
-  import { ScrollTrigger } from 'gsap/ScrollTrigger'
-
+  const { $gsap } = useNuxtApp()
   const { locale, t } = useI18n()
 
   useHead({
@@ -24,15 +22,14 @@
   })
 
   //region animation
-  gsap.registerPlugin(ScrollTrigger)
-  const main = ref()
+  const main = ref(null)
   let ctx
 
   onMounted(() => {
-    ctx = gsap.context((self) => {
+    ctx = $gsap.context((self) => {
       let targets = self.selector('.animate.flip-in-left')
       targets.forEach(target => {
-        gsap.from(target, {
+        $gsap.from(target, {
           xPercent: -100,
           duration: 1,
           ease: 'power2.out',
@@ -46,7 +43,7 @@
 
       targets = self.selector('.animate.fade-in-left')
       targets.forEach(target => {
-        gsap.from(target, {
+        $gsap.from(target, {
           xPercent: -10,
           duration: 1,
           opacity: 0,
@@ -60,7 +57,7 @@
 
       targets = self.selector('.animate.fade-in-top')
       targets.forEach(target => {
-        gsap.from(target, {
+        $gsap.from(target, {
           yPercent: -100,
           opacity: 0,
           duration: 1.5,

diff --git a/src/plugins/gsap.js b/src/plugins/gsap.js
@@ -0,0 +1,10 @@
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(gsap)
+  nuxtApp.provide('gsap', gsap)
+  nuxtApp.provide('ScrollTrigger', ScrollTrigger)
+})