From 48b60b059d21e5a02c7e3aa6248d6a4053a551fd Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Thu, 5 Jun 2025 03:37:21 +0800
Subject: [PATCH] add some animation

---
 .vitepress/theme/Layout.vue                   |  85 ++++++++-
 .vitepress/theme/components/KTab/index.vue    |   1 +
 .../theme/components/bilibli-player/index.vue |   4 +-
 .../theme/components/scrollbar/controller.ts  |  25 +++
 .../theme/components/scrollbar/index.vue      | 113 +++++++++++
 .vitepress/theme/css/animation.css            |  52 +++++
 .vitepress/theme/css/style.css                | 179 ++++++++++--------
 .vitepress/theme/index.mts                    |   1 +
 package-lock.json                             |  21 +-
 package.json                                  |   1 +
 10 files changed, 384 insertions(+), 98 deletions(-)
 create mode 100644 .vitepress/theme/components/scrollbar/controller.ts
 create mode 100644 .vitepress/theme/components/scrollbar/index.vue
 create mode 100644 .vitepress/theme/css/animation.css

diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index f559ea3..eeddd88 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -1,9 +1,8 @@
-
-
 <template>
     <DefaultTheme.Layout id="k-layout">
-
     </DefaultTheme.Layout>
+    <ScrollBar />
+
 </template>
 
 <script setup lang="ts">
@@ -12,6 +11,13 @@ import DefaultTheme from 'vitepress/theme';
 import { nextTick, onMounted, provide } 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);
 
 const data = useData()
 const router = useRouter()
@@ -21,6 +27,7 @@ const enableTransitions = () =>
 
 const isDark = data.isDark;
 
+
 const setupMediumZoom = () => {
     mediumZoom("[data-zoomable]", {
         background: "transparent",
@@ -65,14 +72,78 @@ const handleRouteChangeStart = async (to: string) => {
 const handleRouteChangeComplete = async (to: string) => {
     await animateOut();
     setupMediumZoom();
+
+    makeHomeAnimation();
 };
 
 
 router.onBeforeRouteChange = handleRouteChangeStart;
 router.onAfterRouteChange = handleRouteChangeComplete;
 
+function makeHomeAnimation() {
+    if (router.route.path !== '/openmcp/') {
+        return;
+    }
+
+    gsap.from(".main", {
+        opacity: 0,      // 初始透明度
+        x: -100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+    gsap.from(".VPHero .VPImage", {
+        opacity: 0,      // 初始透明度
+        x: 100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+    gsap.from(".VPFeatures.VPHomeFeatures", {
+        opacity: 0,      // 初始透明度
+        y: 100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+
+    const elements = [
+        { selector: ".bilibili-player-container", start: "top 65%", end: "top 65%" },
+        { selector: "#openmcp-为谁准备", trigger: '#openmcp-为谁准备', start: "top 65%", end: "top 65%" },
+        { selector: ".k-tabs", trigger: '#openmcp-为谁准备', start: "top 65%", end: "top 65%" },
+        { selector: "#问题解答-faq", trigger: '#问题解答-faq', start: "top 65%", end: "top 65%" },
+        { selector: ".el-collapse", trigger: '#问题解答-faq', start: "top 65%", end: "top 65%" },
+    ];
+
+    elements.forEach(element => {
+        gsap.fromTo(element.selector, 
+            {
+                opacity: 0,
+                y: 100,
+                duration: 1.2,
+                ease: "power2.out",
+            },
+            { 
+                opacity: 1,
+                y: 0,
+                duration: 1.2, // 延长动画时间
+                ease: "power2.out", // 添加缓动效果
+                scrollTrigger: {
+                    trigger: element.trigger || element.selector,
+                    start: "top 70%",
+                    end: "top 70%",
+                    scrub: false,
+                    toggleActions: "play none reverse none",
+                }
+            }
+        );
+    });
+}
+
 onMounted(() => {
     setupMediumZoom();
+
+    makeHomeAnimation();
 });
 </script>
 
@@ -82,6 +153,13 @@ onMounted(() => {
     transition: background-color 0.15s ease, color 0.3s ease;
 }
 
+
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    width: 0px;
+}
+
 .medium-zoom-overlay {
     backdrop-filter: blur(5rem);
 }
@@ -109,5 +187,4 @@ onMounted(() => {
     transform: translateY(100px);
     opacity: 0;
 }
-
 </style>
\ No newline at end of file
diff --git a/.vitepress/theme/components/KTab/index.vue b/.vitepress/theme/components/KTab/index.vue
index 1d21c19..7ecf773 100644
--- a/.vitepress/theme/components/KTab/index.vue
+++ b/.vitepress/theme/components/KTab/index.vue
@@ -78,6 +78,7 @@ const tabsContainer: TabsContainer = reactive({
         const container = tabsContainer.panelContainer;
         const panels = Array.from(container.children) as HTMLElement[];
 
+        // 进行动画切换
         panels.forEach((panel, index) => {
             console.log('index', index);
             console.log('id', id);
diff --git a/.vitepress/theme/components/bilibli-player/index.vue b/.vitepress/theme/components/bilibli-player/index.vue
index 08c0560..c541a19 100644
--- a/.vitepress/theme/components/bilibli-player/index.vue
+++ b/.vitepress/theme/components/bilibli-player/index.vue
@@ -54,7 +54,7 @@ function playVideo() {
     aspect-ratio: 16/9;
     border-radius: .5em;
     overflow: hidden;
-    border: 2px solid var(--vp-c-brand-3);
+    border: 3px solid var(--vp-c-brand-2);
 }
 
 .cover-container {
@@ -78,7 +78,7 @@ function playVideo() {
     width: 64px;
     height: 64px;
     border-radius: 50%;
-    background-color: var(--vp-c-brand-3);
+    background-color: var(--vp-c-brand-2);
     border: none;
     color: var(--vp-c-bg);
     cursor: pointer;
diff --git a/.vitepress/theme/components/scrollbar/controller.ts b/.vitepress/theme/components/scrollbar/controller.ts
new file mode 100644
index 0000000..d0a0234
--- /dev/null
+++ b/.vitepress/theme/components/scrollbar/controller.ts
@@ -0,0 +1,25 @@
+import { reactive } from 'vue';
+
+interface ScrollbarController {
+    element: any;
+    display: boolean;
+    height: number;
+    width: number;
+    top: number;
+    opacity: number;
+    percentage: number;
+}
+
+export const scrollbarController = reactive<ScrollbarController>({
+    element: undefined,
+    display: true,
+    height: 200,
+    width: 5,
+    top: 0,
+    opacity: 0,
+    percentage: 0
+});
+
+export const navigationBarController = reactive({
+    show: true
+});
\ No newline at end of file
diff --git a/.vitepress/theme/components/scrollbar/index.vue b/.vitepress/theme/components/scrollbar/index.vue
new file mode 100644
index 0000000..587490c
--- /dev/null
+++ b/.vitepress/theme/components/scrollbar/index.vue
@@ -0,0 +1,113 @@
+<template>
+    <div
+        class="k-scrollerbar"
+        :style="scrollbarStyle"
+        :ref="el => scrollbarController.element = el"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+    >
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { scrollbarController } from './controller';
+import { navigationBarController } from './controller';
+
+const scrollbarStyle = computed(() => ({
+    height: scrollbarController.height + 'px',
+    width: scrollbarController.width + 'px',
+    opacity: scrollbarController.opacity
+}));
+
+let disappearHandler: undefined | number = undefined;
+
+function clearDisappearHandler() {
+    if (disappearHandler) {
+        clearTimeout(disappearHandler);
+    }
+}
+
+function hideDisappearHandler(timeout=500) {
+    disappearHandler = setTimeout(() => {
+        scrollbarController.opacity = 0;
+    }, timeout);
+}
+
+function onMouseEnter() {
+    clearDisappearHandler();
+    scrollbarController.opacity = 1;
+    scrollbarController.width = 8;
+}
+
+function onMouseLeave() {
+    scrollbarController.width = 5;
+    hideDisappearHandler(1000);
+}
+
+function onScroll(event) {    
+    clearDisappearHandler();
+    scrollbarController.opacity = 1;
+    // 总高度
+    const totalHeight = document.documentElement.scrollHeight;
+    // 视窗高度
+    const viewportHeight = window.innerHeight;
+    
+    // 如果视窗高度都大于总高度，不需要显示
+    if (viewportHeight >= totalHeight) {
+        scrollbarController.opacity = 0;
+        return;
+    }
+
+    // 当前的滚动距离 [0, totalHeight - viewportHeight]
+    const scrollPosition = window.scrollY;
+
+    // 计算滚动条的大小和位置
+    const ratio = viewportHeight / totalHeight;
+    const scrollbarHeight = Math.max(20, viewportHeight * ratio);
+
+    // top 取值为 [0, viewportHeight - scrollbarHeight]
+    const percentage = scrollPosition / (totalHeight - viewportHeight);
+    const scrollbarTop = percentage * (viewportHeight);
+    
+    scrollbarController.height = scrollbarTop;
+    // scrollbarController.top = scrollbarTop;
+    scrollbarController.percentage = percentage;
+}
+
+function onScrollEnd() {
+    hideDisappearHandler();
+}
+
+function onWheel(event) {
+    if (event.deltaY > 0) {
+        navigationBarController.show = false;        
+    } else {
+        navigationBarController.show = true;
+    }
+}
+
+document.addEventListener('scroll', onScroll);
+document.addEventListener('scrollend', onScrollEnd);
+document.addEventListener('resize', onScroll);
+document.addEventListener('wheel', onWheel);
+
+</script>
+
+<style>
+.k-scrollerbar {
+    left: 0;
+    top: 0;
+    background-color: var(--vp-c-brand-2);
+    border-radius: .3em;
+    position: fixed;
+    z-index: 200;
+    transition-property: width, opacity;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/css/animation.css b/.vitepress/theme/css/animation.css
new file mode 100644
index 0000000..d5557e9
--- /dev/null
+++ b/.vitepress/theme/css/animation.css
@@ -0,0 +1,52 @@
+
+
+.tagline {
+    width: fit-content;
+}
+
+.tagline {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    padding: 0.5rem 0;
+    cursor: pointer;
+}
+
+.tagline:hover::before {
+    transform: translateX(0);
+}
+
+.tagline::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    background-color: var(--vp-c-brand-2);
+    transform: translateX(-105%);
+    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+
+.VPFeatures .item {
+    cursor: pointer;
+    transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.VPFeatures .item:hover {
+    transform: scale(1.05);
+}
+
+.VPFeatures .item .box {
+    transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
+    border-radius: .5em;
+}
+
+.VPFeatures .item:hover .box {
+    background-color: var(--vp-c-brand-3);
+}
+
+.VPFeatures .item:hover .box .details {
+    color: var(--vp-c-white);
+}
\ No newline at end of file
diff --git a/.vitepress/theme/css/style.css b/.vitepress/theme/css/style.css
index f2e1ecf..e9fbfce 100644
--- a/.vitepress/theme/css/style.css
+++ b/.vitepress/theme/css/style.css
@@ -44,30 +44,34 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-	--vp-c-default-1: var(--vp-c-gray-1);
-	--vp-c-default-2: var(--vp-c-gray-2);
-	--vp-c-default-3: var(--vp-c-gray-3);
-	--vp-c-default-soft: var(--vp-c-gray-soft);
+    --vp-c-default-1: var(--vp-c-gray-1);
+    --vp-c-default-2: var(--vp-c-gray-2);
+    --vp-c-default-3: var(--vp-c-gray-3);
+    --vp-c-default-soft: var(--vp-c-gray-soft);
 
-	--vp-c-brand-1: #d8a8e7; /* 较深的变体 */
-	--vp-c-brand-2: #C285D6; /* 基底颜色 */
-	--vp-c-brand-3: #a368b8; /* 较浅的变体 */
-	--vp-c-brand-soft: rgba(194, 133, 214, 0.1); /* 半透明的柔和版本 */
+    --vp-c-brand-1: #d8a8e7;
+    /* 较深的变体 */
+    --vp-c-brand-2: #C285D6;
+    /* 基底颜色 */
+    --vp-c-brand-3: #a368b8;
+    /* 较浅的变体 */
+    --vp-c-brand-soft: rgba(194, 133, 214, 0.1);
+    /* 半透明的柔和版本 */
 
-	--vp-c-tip-1: var(--vp-c-brand-1);
-	--vp-c-tip-2: var(--vp-c-brand-2);
-	--vp-c-tip-3: var(--vp-c-brand-3);
-	--vp-c-tip-soft: var(--vp-c-brand-soft);
+    --vp-c-tip-1: var(--vp-c-brand-1);
+    --vp-c-tip-2: var(--vp-c-brand-2);
+    --vp-c-tip-3: var(--vp-c-brand-3);
+    --vp-c-tip-soft: var(--vp-c-brand-soft);
 
-	--vp-c-warning-1: var(--vp-c-yellow-1);
-	--vp-c-warning-2: var(--vp-c-yellow-2);
-	--vp-c-warning-3: var(--vp-c-yellow-3);
-	--vp-c-warning-soft: var(--vp-c-yellow-soft);
+    --vp-c-warning-1: var(--vp-c-yellow-1);
+    --vp-c-warning-2: var(--vp-c-yellow-2);
+    --vp-c-warning-3: var(--vp-c-yellow-3);
+    --vp-c-warning-soft: var(--vp-c-yellow-soft);
 
-	--vp-c-danger-1: var(--vp-c-red-1);
-	--vp-c-danger-2: var(--vp-c-red-2);
-	--vp-c-danger-3: var(--vp-c-red-3);
-	--vp-c-danger-soft: var(--vp-c-red-soft);
+    --vp-c-danger-1: var(--vp-c-red-1);
+    --vp-c-danger-2: var(--vp-c-red-2);
+    --vp-c-danger-3: var(--vp-c-red-3);
+    --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
 /**
@@ -75,15 +79,15 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-	--vp-button-brand-border: transparent;
-	--vp-button-brand-text: var(--vp-c-white);
-	--vp-button-brand-bg: var(--vp-c-brand-3);
-	--vp-button-brand-hover-border: transparent;
-	--vp-button-brand-hover-text: var(--vp-c-white);
-	--vp-button-brand-hover-bg: var(--vp-c-brand-2);
-	--vp-button-brand-active-border: transparent;
-	--vp-button-brand-active-text: var(--vp-c-white);
-	--vp-button-brand-active-bg: var(--vp-c-brand-1);
+    --vp-button-brand-border: transparent;
+    --vp-button-brand-text: var(--vp-c-white);
+    --vp-button-brand-bg: var(--vp-c-brand-3);
+    --vp-button-brand-hover-border: transparent;
+    --vp-button-brand-hover-text: var(--vp-c-white);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+    --vp-button-brand-active-border: transparent;
+    --vp-button-brand-active-text: var(--vp-c-white);
+    --vp-button-brand-active-bg: var(--vp-c-brand-1);
 }
 
 /**
@@ -91,27 +95,27 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-	--vp-home-hero-name-color: transparent;
-	--vp-home-hero-name-background: -webkit-linear-gradient(120deg,
-			#bd34fe 30%,
-			#41d1ff);
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+            #bd34fe 30%,
+            #41d1ff);
 
-	--vp-home-hero-image-background-image: linear-gradient(-45deg,
-			#bd34fe 50%,
-			#47caff 50%);
-	--vp-home-hero-image-filter: blur(44px);
+    --vp-home-hero-image-background-image: linear-gradient(-45deg,
+            #bd34fe 50%,
+            #47caff 50%);
+    --vp-home-hero-image-filter: blur(44px);
 }
 
 @media (min-width: 640px) {
-	:root {
-		--vp-home-hero-image-filter: blur(56px);
-	}
+    :root {
+        --vp-home-hero-image-filter: blur(56px);
+    }
 }
 
 @media (min-width: 960px) {
-	:root {
-		--vp-home-hero-image-filter: blur(68px);
-	}
+    :root {
+        --vp-home-hero-image-filter: blur(68px);
+    }
 }
 
 /**
@@ -119,15 +123,15 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-	--vp-custom-block-tip-border: transparent;
-	--vp-custom-block-tip-text: var(--vp-c-text-1);
-	--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
-	--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-border: transparent;
+    --vp-custom-block-tip-text: var(--vp-c-text-1);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 }
 
 :root {
-	--vp-home-hero-name-color: transparent;
-	--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
 }
 
 :root {
@@ -138,34 +142,34 @@
     --el-text-color-primary: var(--vp-c-text-1) !important;
     --el-border-color: var(--vp-c-border) !important;
     --el-bg-color: var(--vp-c-bg) !important;
-	--el-collapse-border-color: var(--vp-c-border) !important;
+    --el-collapse-border-color: var(--vp-c-border) !important;
 }
 
 
 .el-collapse {
-	border-top: 1px solid transparent !important;
+    border-top: 1px solid transparent !important;
 }
 
 
 .el-collapse-item__header {
-	border-top: unset !important;
+    border-top: unset !important;
     background-color: var(--vp-c-bg) !important;
-	border-bottom: 1px solid var(--vp-c-border) !important;
-	height: fit-content !important;
+    border-bottom: 1px solid var(--vp-c-border) !important;
+    height: fit-content !important;
 }
 
 .el-collapse-item__title {
-	font-size: 1.2rem;
-	padding: 10px 0;
+    font-size: 1.2rem;
+    padding: 10px 0;
 }
 
 .el-collapse-item__content {
-	padding: 20px 0 0 0;
-	font-size: 15px !important;
+    padding: 20px 0 0 0;
+    font-size: 15px !important;
 }
 
 .el-collapse-item__wrap {
-	border-bottom: 1px solid var(--vp-c-border) !important;
+    border-bottom: 1px solid var(--vp-c-border) !important;
 }
 
 /**
@@ -173,11 +177,11 @@
  * -------------------------------------------------------------------------- */
 
 .DocSearch {
-	--docsearch-primary-color: var(--vp-c-brand-1) !important;
+    --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
 .two-side-layout .image-container {
-	display: unset !important;
+    display: unset !important;
 }
 
 
@@ -189,61 +193,78 @@
 }
 
 .home-tab {
-	min-height: 477px;
+    min-height: 477px;
 }
 
 
 @media (max-width: 500px) {
     .home-tab {
-		min-height: 677px;
+        min-height: 677px;
     }
 }
 
 
 .VPHero .image-container img {
-	box-shadow: unset !important;
+    box-shadow: unset !important;
 }
 
 iframe {
-	border: 2px solid var(--vp-c-brand-3);
-	border-radius: 8px;
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-	transition: border-color 0.3s ease;
+    border: 2px solid var(--vp-c-brand-3);
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: border-color 0.3s ease;
 }
 
 
 .VPMenu {
-	background-color: rgba(255, 255, 255, 0.55) !important;
-	border: unset !important;
-	backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.55) !important;
+    border: unset !important;
+    backdrop-filter: blur(10px);
 }
 
 
 
 .dark .VPMenu {
-	background-color: rgba(0, 0, 0, 0.55) !important;
-	backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.55) !important;
+    backdrop-filter: blur(10px);
 }
 
 
 .VPTeamPage {
-	margin-top: 0 !important;
+    margin-top: 0 !important;
 }
 
 /* 自定义全局滚动条样式 */
 ::-webkit-scrollbar {
-  width: 8px;
+    width: 0px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--vp-c-default-soft);
+    background: var(--vp-c-default-soft);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--vp-c-brand-3);
-  border-radius: 4px;
+    background: var(--vp-c-brand-3);
+    border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--vp-c-brand-2);
+    background: var(--vp-c-brand-2);
+}
+
+/* 设置选中文本的背景色和文字颜色 */
+::selection {
+    background: var(--vp-c-brand-2);
+    color: white;
+}
+
+/* 兼容 Firefox */
+::-moz-selection {
+    background: var(--vp-c-brand-2);
+    color: white;
+}
+
+.VPHero .name.clip {
+    color: var(--vp-c-brand-2) !important;
+    background-color: var(--vp-c-brand-2) !important;
 }
\ No newline at end of file
diff --git a/.vitepress/theme/index.mts b/.vitepress/theme/index.mts
index bcca0a1..2bb7f7b 100644
--- a/.vitepress/theme/index.mts
+++ b/.vitepress/theme/index.mts
@@ -20,6 +20,7 @@ import { ElCollapse, ElCollapseItem, ElTimeline, ElTimelineItem } from 'element-
 import './css/style.css';
 import './css/iconfont.css';
 import './css/element-plus.css';
+import './css/animation.css';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css';
 import '@nolebase/vitepress-plugin-inline-link-preview/client/style.css';
diff --git a/package-lock.json b/package-lock.json
index 668d2bb..19fab9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "dependencies": {
         "element-plus": "^2.9.11",
+        "gsap": "^3.13.0",
         "vitepress": "^1.6.3"
       },
       "devDependencies": {
@@ -3643,7 +3644,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -3944,7 +3944,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC",
       "optional": true
     },
@@ -3964,6 +3963,11 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
+    },
     "node_modules/hachure-fill": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
@@ -4033,7 +4037,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -4056,7 +4060,6 @@
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "bin": {
@@ -4417,7 +4420,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -4665,7 +4667,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "bin": {
@@ -4758,7 +4759,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
       "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -4970,7 +4970,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -5072,7 +5071,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -5271,14 +5269,13 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
       "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true,
       "license": "ISC",
       "optional": true
     },
@@ -5306,7 +5303,6 @@
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
       "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
       "license": "ISC",
       "optional": true,
       "bin": {
@@ -5381,7 +5377,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "optional": true,
       "engines": {
diff --git a/package.json b/package.json
index dee5f75..d98e662 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "element-plus": "^2.9.11",
+    "gsap": "^3.13.0",
     "vitepress": "^1.6.3"
   },
   "devDependencies": {