howard/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 15:51:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add GSAP animation for organization name on news organization page

Browse Source
This commit is contained in:
吳元皓 2025-05-06 16:41:03 +08:00
parent 6995c7f5d2
commit 95661e908a
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/newsOrgAbout/[slug].vue
View File

@ -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>