feat: aida页面动画

src/pages/aida/index.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 	import { useHead } from '@unhead/vue'
-	import { shallowRef, useTemplateRef, computed } from 'vue'
+	import { shallowRef, useTemplateRef, computed, onMounted } from 'vue'
 	import { useI18n } from 'vue-i18n'
+	import { gsap } from 'gsap'
+	import { ScrollTrigger } from 'gsap/ScrollTrigger'
 	import diamondIcon from '@/assets/images/aida/diamond.svg'
 	import industryTwo from '@/assets/images/aida/industry-2.png'
 	import industryThree from '@/assets/images/aida/industry-3.png'
 	import timeIcon from '@/assets/images/aida/time.svg'
 
+	gsap.registerPlugin(ScrollTrigger)
+
 	const { t, locale } = useI18n()
 
 	const demoVideo = computed(() => {
@@ -104,6 +108,202 @@ const plans = computed(() => {
 			}
 		]
 	})
+
+	onMounted(() => {
+		// 1. 顶部 aida-title 从上往下滑入
+		gsap.from('#aida-title', {
+			y: -100,
+			opacity: 0,
+			duration: 1.5,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '#aida-title',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 2. intro-copy 从下往上滑入
+		gsap.from('.intro-copy', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.intro-copy',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 3. pricing-copy 从下往上滑入
+		gsap.from('.pricing-copy', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.1,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.pricing-copy',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 4. academic-copy 从下往上滑入
+		gsap.from('.academic-copy', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.2,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.academic-copy',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 5. features-section 的 section-title 从下往上滑入
+		gsap.from('.features-section .section-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.features-section .section-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 6. feature-list 从下往上滑入
+		gsap.from('.feature-list', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.2,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.feature-list',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 7. benefits-section 的 section-title 从下往上滑入
+		gsap.from('.benefits-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.benefits-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 8. benefits-grid 的三个图标动画
+		// 先设置初始状态：左右两个隐藏在中间位置
+		gsap.set('.benefit-card:first-child', { x: 200, opacity: 0 })
+		gsap.set('.benefit-card:last-child', { x: -200, opacity: 0 })
+
+		// 中间的图标先显示
+		gsap.from('.benefit-card:nth-child(2)', {
+			scale: 0.5,
+			opacity: 0,
+			duration: 1.1,
+			ease: 'back.out(1.7)',
+			scrollTrigger: {
+				trigger: '.benefits-grid',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 左边的图标从中间滑到左边
+		gsap.to('.benefit-card:first-child', {
+			x: 0,
+			opacity: 1,
+			duration: 1.3,
+			delay: 0.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.benefits-grid',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 右边的图标从中间滑到右边
+		gsap.to('.benefit-card:last-child', {
+			x: 0,
+			opacity: 1,
+			duration: 1.3,
+			delay: 0.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.benefits-grid',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 9. demo-title 从下往上滑入
+		gsap.from('.demo-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.demo-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 10. subscription-title 从下往上滑入
+		gsap.from('.subscription-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.subscription-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 11. subscription-list 从下往上滑入
+		gsap.from('.subscription-list', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.1,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.subscription-list',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 12. plans-grid 从下往上滑入
+		gsap.from('.plans-grid', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.2,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.plans-grid',
+				start: 'top 85%',
+				once: true
+			}
+		})
+	})
 </script>
 
 <template>