前言
这里没有冗长的理论，只有动画实战中的精华干货。本节不涉及复杂的技术细节，而是为你描绘学成后的蓝图 ------ 你能实现怎样的效果，并能拿到源码亲手实践、欢迎一起交流。
本系列聚焦于网页 scroll 滚动动画，核心工具是 gsap。这个动画库在国外极为流行，但在国内知名度还不高（早期因收费门槛，近年已完全免费）。加上目前国内企业对动效的要求尚未普及，因此了解它的人并不多。
但请相信，如果你渴望做出令人惊叹的网页动画，看完我们最终要实现的效果，你一定会心动，并愿意加入我们的 「前端动画交流群」，一起进阶、一起成长。
GSAP 是什么？
GSAP 是国外顶尖的专业动画库，大多数让人"眼前一亮"的网页动画，背后都有它的身影（当然，像 Framer Motion 这类新秀也同样强大，后续我们也会推出相关高阶教程）。
现在，就来看看 GSAP 能做出哪些炸裂的视觉效果吧！
里面涉及的 3D 效果，其实是结合了 three.js 与 gsap 共同实现的。也就是说，光会 three.js，离做出真正酷炫的动画还差一步。
所以，我们不妨从易到难 ，先掌握 2D 动画，做出看得见的效果------这不仅能帮你夯实基础，也会极大增强你的信心。
我们这个动画系列，将专注于 gsap 在 scroll 滚动动画 方面的应用。可能有同学会问：为什么只讲滚动动画？
为什么选择用它实现 Scroll 动画？
-
更聚焦于一个技术点
gsap动画涉及的点太多了，如果全面展开，整个教程周期会拉得非常长。我们希望在有限时间内，带你学透一个真正实用的高价值模块。所以选择了scroll这块。 -
GSAP 最牛的插件就是跟滚动相关的
如果要问 GSAP 相较于其他动画库最强大的功能是什么，那一定是与滚动相关的 ScrollTrigger 插件。它到底能实现多震撼的效果？下面我们来看几个典型示例（这些案例在后续教程中都会一一实现）
一些实现效果
以上只是冰山一角，总共案例很多，目前手上有接近 100 个效果，但是后期逐步完成多少，现在还没具体规划，但至少几十个肯定有的！
关于本教程
本系列内容融合了国外优质付费课程与多位大神的实战案例，虽是我个人学习与整合的成果，但在内容深度与体系性上，有信心达到国内 TOP 级别。纯为分享，希望与你一起进步。
作为前端开发者，很多人都是被那些"会动"的酷炫界面吸引入行的。遗憾的是，国内在这方面的高质量资源并不多。而我，不仅深深享受着做出流畅动画带来的成就感，也坚信自己会在这条路上走得更远，也希望有同行的伙伴！
这里也分享我个人的组件库项目：T-UI GitHub 地址（如需访问请科学上网）。它的官网动效仅花了 1 个月 学习与实践完成，效果还算不错，欢迎看看源码、给个 Star ⭐️，我们一起交流！
教程安排
第一部分：系统入门
基本上是拿国外很好一个技术教程来分享(同时提醒大家，学好英语是非常非常重要的，我也一直在坚持，大概1年时间，效果还是挺明显的，看这个教程基本上不看字幕能听懂百分之 80)
为什么选择这个教程呢，因为我对比过多个教程，这个教程优点非常突出。
-
有 核心原理 讲解：这点至关重要。初学
ScrollTrigger时，我经常会遇到一些莫名其妙的布局问题。（是因为ScrollTrigger插件会在某些情况下会影响到布局），如果不了解，很难去解决这些问题。 -
案例丰富：该教程几乎覆盖了所有关键技术点与动画类型，能帮我们省去大量自己设计案例的时间。
第二部分：实战进阶
我们将一起复现 Awwwards 上的获奖网站效果。（如果全球最顶尖的网站动效在哪个网站，没错，就是这个网站了）这些效果在上面我们展示过，也是我之前看一些大神的博客、视频，然后学习的资料，发现确实很有帮助，也一起分享，算是巩固我自己所学的同时也能分享出来！
欢迎加入我们的技术交流群
我们群是一个覆盖 前端动画 、Node.js 、AI Agent 开发 及我的组件库项目 T-UI 的综合性技术交流社区。
目前，T-UI 是群内最成熟、讨论最活跃的项目。从源码质量到官网效果，都经得起细看。欢迎你来交流想法、贡献代码，或 simply give it a star------❤️ 比心！