add some animation

This commit is contained in:
锦恢 2025-06-05 04:19:07 +08:00 committed by li1553770945
parent e64a1b5419
commit 425cdb9e34
4 changed files with 544 additions and 260 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,23 +1,21 @@
<template>
<DefaultTheme.Layout id="k-layout">
</DefaultTheme.Layout>
<ScrollBar />
<ClientOnly>
<ScrollBar v-if="mounted" />
</ClientOnly>
</template>
<script setup lang="ts">
import { useData, useRouter } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import { nextTick, onMounted, provide } from 'vue';
import { nextTick, onMounted, provide, ref } from 'vue';
import mediumZoom from "medium-zoom";
import { animateIn, animateOut } from './hook/animate';
import ScrollBar from './components/scrollbar/index.vue';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
//
gsap.registerPlugin(ScrollTrigger);
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
const data = useData()
const router = useRouter()
@ -26,7 +24,7 @@ const enableTransitions = () =>
window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
const isDark = data.isDark;
const mounted = ref(false);
const setupMediumZoom = () => {
mediumZoom("[data-zoomable]", {
@ -141,8 +139,9 @@ function makeHomeAnimation() {
}
onMounted(() => {
mounted.value = true;
setupMediumZoom();
gsap.registerPlugin(ScrollTrigger);
makeHomeAnimation();
});
</script>