mirror of
https://github.com/hpware/news-analyze.git
synced 2025-06-23 13:04:23 +00:00
feat: add GSAP animation for organization name on news organization page
This commit is contained in:
parent
6995c7f5d2
commit
95661e908a
1 changed files with 12 additions and 0 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue