GSAP 动画引擎实战：打造丝滑动效交互组件库

---

一、媒介

在今世前端开发中，动画效果不但是用户体验加分项，更是构建交互体验的关键。
相比 CSS 动画的局限，GSAP（GreenSock Animation Platform）具备：

• 更强的控制力（时间轴、多状态联动）
  
• 更平滑的性能（GPU 加快）
  
• 更丰富的插件支持（滚动触发、拖拽、3D 等）
  

本篇文章将带你从 0 到 1 构建一个基于 GSAP 的丝滑动效交互组件库，并通过 Vue 3 实战演示多个经典场景：元素入场、列表过渡、滚动触发、拖拽交互、打字动画等。

---

二、项目初始化

我们利用 Vite + Vue 3 快速启动项目，并安装 GSAP：

1. npm install gsap

复制代码

基础目录布局如下：

1. 📦src
2. ┣ 📂components
3. ┃ ┣ 📜FadeIn.vue
4. ┃ ┣ 📜SlideList.vue
5. ┃ ┣ 📜ScrollReveal.vue
6. ┃ ┣ 📜DraggableBox.vue
7. ┃ ┗ 📜Typewriter.vue
8. ┣ 📜App.vue
9. ┗ 📜main.js

复制代码

---

三、核心动效组件实战

1. 元素淡入组件：FadeIn.vue

1. <script setup>
2. import { onMounted, ref } from 'vue'
3. import gsap from 'gsap'
5. const el = ref(null)
6. onMounted(() => {
7.   gsap.from(el.value, {
8.     opacity: 0,
9.     y: 30,
10.     duration: 1.2,
11.     ease: 'power2.out',
12.   })
13. })
14. </script>
16. <template>
17.   <div ref="el" class="p-4 bg-blue-100 rounded shadow">
18.     🚀 我是淡入动画内容
19.   </div>
20. </template>

复制代码

2. 列表级联动画：SlideList.vue

1. <script setup>
2. import { onMounted, ref } from 'vue'
3. import gsap from 'gsap'
5. const list = ref(['Vue', 'React', 'Svelte', 'Solid'])
7. onMounted(() => {
8.   gsap.from('.list-item', {
9.     x: -30,
10.     opacity: 0,
11.     stagger: 0.2,
12.     duration: 0.8,
13.     ease: 'back.out(1.7)',
14.   })
15. })
16. </script>
18. <template>
19.   <ul>
20.     <li v-for="(item, i) in list" :key="i" class="list-item mb-2">
21.       {{ item }}
22.     </li>
23.   </ul>
24. </template>

复制代码

3. 滚动触发 Reveal 动画：ScrollReveal.vue

1. <script setup>
2. import { onMounted, ref } from 'vue'
3. import gsap from 'gsap'
4. import ScrollTrigger from 'gsap/ScrollTrigger'
6. gsap.registerPlugin(ScrollTrigger)
8. const el = ref(null)
9. onMounted(() => {
10.   gsap.from(el.value, {
11.     scrollTrigger: {
12.       trigger: el.value,
13.       start: 'top 80%',
14.     },
15.     opacity: 0,
16.     y: 50,
17.     duration: 1,
18.   })
19. })
20. </script>
22. <template>
23.   <div ref="el" class="mt-64 p-4 bg-green-100 rounded">
24.     🌿 我是滚动触发内容
25.   </div>
26. </template>

复制代码

4. 拖拽盒子组件：DraggableBox.vue

1. <script setup>
2. import { onMounted, ref } from 'vue'
3. import gsap from 'gsap'
4. import Draggable from 'gsap/Draggable'
6. gsap.registerPlugin(Draggable)
8. const box = ref(null)
10. onMounted(() => {
11.   Draggable.create(box.value, {
12.     bounds: 'body',
13.     inertia: true,
14.     edgeResistance: 0.65,
15.     type: 'x,y',
16.   })
17. })
18. </script>
20. <template>
21.   <div ref="box" class="w-24 h-24 bg-pink-400 text-white flex items-center justify-center rounded cursor-move">
22.     拖我
23.   </div>
24. </template>

复制代码

5. 打字机效果组件：Typewriter.vue

1. <script setup>
2. import { ref, onMounted } from 'vue'
3. import gsap from 'gsap'
5. const text = 'Hello, GSAP Typewriter!'
6. const display = ref('')
8. onMounted(() => {
9.   let i = 0
10.   const interval = setInterval(() => {
11.     if (i >= text.length) return clearInterval(interval)
12.     display.value += text[i++]
13.   }, 80)
14. })
15. </script>
17. <template>
18.   <div class="text-lg font-mono">{{ display }}</div>
19. </template>

复制代码

---

四、拓展功能实现

1. ScrollTrigger 动态吸顶动效组件

1. <script setup>
2. import { onMounted, ref } from 'vue'
3. import gsap from 'gsap'
4. import ScrollTrigger from 'gsap/ScrollTrigger'
6. gsap.registerPlugin(ScrollTrigger)
8. const bar = ref(null)
10. onMounted(() => {
11.   gsap.to(bar.value, {
12.     scrollTrigger: {
13.       trigger: bar.value,
14.       start: 'top top',
15.       toggleClass: 'fixed-bar',
16.       pin: true,
17.       pinSpacing: false,
18.     },
19.   })
20. })
21. </script>
23. <template>
24.   <div ref="bar" class="w-full bg-orange-400 p-3 text-white">
25.     我是吸顶条
26.   </div>
27. </template>
29. <style>
30. .fixed-bar {
31.   position: fixed;
32.   top: 0;
33.   left: 0;
34.   right: 0;
35. }
36. </style>

复制代码

2. 卡片 Flip 动画：布局变化动画

1. <script setup>
2. import { ref, watchEffect, nextTick } from 'vue'
3. import gsap from 'gsap'
4. import Flip from 'gsap/Flip'
6. gsap.registerPlugin(Flip)
8. const cards = ref(['A', 'B', 'C'])
10. function shuffle() {
11.   const state = Flip.getState('.flip-card')
12.   cards.value.reverse()
13.   nextTick(() => {
14.     Flip.from(state, { duration: 0.6, ease: 'power1.inOut', absolute: true })
15.   })
16. }
17. </script>
19. <template>
20.   <div class="flex gap-4 mb-4">
21.     <div v-for="c in cards" :key="c" class="flip-card w-16 h-16 bg-purple-300 text-white text-center leading-[4rem]">
22.       {{ c }}
23.     </div>
24.   </div>
25.   <button @click="shuffle" class="bg-purple-600 text-white px-3 py-1 rounded">打乱</button>
26. </template>

复制代码

3. 路由转场动画（带 Timeline）

1. <script setup>
2. import { onMounted, watch } from 'vue'
3. import { useRoute } from 'vue-router'
4. import gsap from 'gsap'
6. const route = useRoute()
8. watch(() => route.fullPath, () => {
9.   gsap.fromTo('main',
10.     { opacity: 0, y: 20 },
11.     { opacity: 1, y: 0, duration: 0.5 })
12. })
13. </script>
15. <template>
16.   <main class="transition-wrapper">
17.     <router-view></router-view>
18.   </main>
19. </template>

复制代码

---

五、总结

我们基于 Vue 3 + GSAP 构建了一个动效组件库，包罗：

• 核心动效组件（入场、滚动、拖拽、打字）
  
• 高级动效实现（吸顶、Flip、Timeline）
  
• 拓展功能以完备代码嵌入文章
  

---

   到这里，这篇文章就和大家说再见啦！我的主页里还藏着许多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你须要的解决方案～
创作这篇内容花了许多的功夫。如果它帮你解决了问题，大概带来了开导，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新本领
收藏文章⭐️ 方便随时查阅
📢 特别提示：
转载请注明原文链接，贸易合作请私信接洽
感谢你的阅读！我们下篇文章再见～ 💕
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。