yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 13:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source
This commit is contained in:
yuanhau 2025-05-06 16:41:03 +08:00
parent 6995c7f5d2
commit 95661e908a
1 changed files with 12 additions and 0 deletions
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"> <script setup lang="ts">
import { gsap } from 'gsap';
import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
gsap.registerPlugin(ScrambleTextPlugin)
const loading = ref(true); const loading = ref(true);
const route = useRoute(); const route = useRoute();
const slug = route.params.slug; const slug = route.params.slug;
@ -26,6 +29,15 @@ useSeoMeta({
title: fetchNewsOrgInfo.value?.title, title: fetchNewsOrgInfo.value?.title,
}); });
const orgNameAnimation = ref(null);
onMounted(() => {
gsap.to(orgNameAnimation.value, {
duration: 1,
scrambleText: fetchNewsOrgInfo.value?.title,
});
});
// Import Icons // Import Icons
import { GlobeAltIcon } from "@heroicons/vue/24/outline"; import { GlobeAltIcon } from "@heroicons/vue/24/outline";
</script> </script>