From af8f3b6627541137dfca376f45fde6ea5bd38918 Mon Sep 17 00:00:00 2001
From: Alexandr Kurkin <2012stalker@gmail.com>
Date: Tue, 31 Oct 2023 15:16:01 +0300
Subject: [PATCH] gsap as plugin

---
 src/layouts/default.vue | 15 ++++++---------
 src/plugins/gsap.js     | 10 ++++++++++
 2 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 src/plugins/gsap.js

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index f6ab8b9..5b0f5e6 100644
--- 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
new file mode 100644
index 0000000..4a78a93
--- /dev/null
+++ 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)
+})