From 95661e908a4cf2b40d6cb1810aa3d581a0f36618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Tue, 6 May 2025 16:41:03 +0800
Subject: [PATCH] feat: add GSAP animation for organization name on news
 organization page

---
 pages/newsOrgAbout/[slug].vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pages/newsOrgAbout/[slug].vue b/pages/newsOrgAbout/[slug].vue
index 6e03ac3..dff4cf9 100644
--- a/pages/newsOrgAbout/[slug].vue
+++ b/pages/newsOrgAbout/[slug].vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { gsap } from 'gsap';
+import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
+gsap.registerPlugin(ScrambleTextPlugin) 
 const loading = ref(true);
 const route = useRoute();
 const slug = route.params.slug;
@@ -26,6 +29,15 @@ useSeoMeta({
   title: fetchNewsOrgInfo.value?.title,
 });
 
+const orgNameAnimation = ref(null);
+
+onMounted(() => {
+    gsap.to(orgNameAnimation.value, {
+  duration: 1, 
+  scrambleText: fetchNewsOrgInfo.value?.title,
+});
+});
+
 // Import Icons
 import { GlobeAltIcon } from "@heroicons/vue/24/outline";
 </script>