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

---

一、前言

在现代前端开发中，动画效果不仅是用户体验加分项，更是构建交互体验的关键。

相比 CSS 动画的局限，GSAP（GreenSock Animation Platform）具备：

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

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

---

二、项目初始化

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

npm install gsap

基础目录结构如下：

📦src┣ 📂components┃ ┣ 📜FadeIn.vue┃ ┣ 📜SlideList.vue┃ ┣ 📜ScrollReveal.vue┃ ┣ 📜DraggableBox.vue┃ ┗ 📜Typewriter.vue┣ 📜App.vue┗ 📜main.js

---

三、核心动效组件实战

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

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'const el = ref(null)
onMounted(() => {gsap.from(el.value, {opacity: 0,y: 30,duration: 1.2,ease: 'power2.out',})
})
</script><template><div ref="el" class="p-4 bg-blue-100 rounded shadow">🚀 我是淡入动画内容</div>
</template>

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

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'const list = ref(['Vue', 'React', 'Svelte', 'Solid'])onMounted(() => {gsap.from('.list-item', {x: -30,opacity: 0,stagger: 0.2,duration: 0.8,ease: 'back.out(1.7)',})
})
</script><template><ul><li v-for="(item, i) in list" :key="i" class="list-item mb-2">{{ item }}</li></ul>
</template>

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

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'gsap.registerPlugin(ScrollTrigger)const el = ref(null)
onMounted(() => {gsap.from(el.value, {scrollTrigger: {trigger: el.value,start: 'top 80%',},opacity: 0,y: 50,duration: 1,})
})
</script><template><div ref="el" class="mt-64 p-4 bg-green-100 rounded">🌿 我是滚动触发内容</div>
</template>

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

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import Draggable from 'gsap/Draggable'gsap.registerPlugin(Draggable)const box = ref(null)onMounted(() => {Draggable.create(box.value, {bounds: 'body',inertia: true,edgeResistance: 0.65,type: 'x,y',})
})
</script><template><div ref="box" class="w-24 h-24 bg-pink-400 text-white flex items-center justify-center rounded cursor-move">拖我</div>
</template>

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

<script setup>
import { ref, onMounted } from 'vue'
import gsap from 'gsap'const text = 'Hello, GSAP Typewriter!'
const display = ref('')onMounted(() => {let i = 0const interval = setInterval(() => {if (i >= text.length) return clearInterval(interval)display.value += text[i++]}, 80)
})
</script><template><div class="text-lg font-mono">{{ display }}</div>
</template>

---

四、拓展功能实现

1. ScrollTrigger 动态吸顶动效组件

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'gsap.registerPlugin(ScrollTrigger)const bar = ref(null)onMounted(() => {gsap.to(bar.value, {scrollTrigger: {trigger: bar.value,start: 'top top',toggleClass: 'fixed-bar',pin: true,pinSpacing: false,},})
})
</script><template><div ref="bar" class="w-full bg-orange-400 p-3 text-white">我是吸顶条</div>
</template><style>
.fixed-bar {position: fixed;top: 0;left: 0;right: 0;
}
</style>

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

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

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

<script setup>
import { onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import gsap from 'gsap'const route = useRoute()watch(() => route.fullPath, () => {gsap.fromTo('main',{ opacity: 0, y: 20 },{ opacity: 1, y: 0, duration: 0.5 })
})
</script><template><main class="transition-wrapper"><router-view></router-view></main>
</template>

---

五、总结

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

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

---

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