前端代码游乐场,动效小样和实验的集中地
GSAP
业界标准 JS 动画库,官网 showcase 本身就是动效灵感库
内容更新日期 · 2026-09-07
What is it · 它是什么
什么是 GSAP
GSAP(GreenSock Animation Platform)是业界标准的 JavaScript 动画库,Awwwards 获奖作品里大量动效背后都是它。它解决浏览器原生 CSS 动画做不好的事:精细的时间线控制、复杂编排、跨元素协调,以及在任何属性上的高性能动画。
How to use · 怎么用
怎么用 GSAP
- 新手从官网的 Getting Started 起步,先掌握 tween 和 timeline 两个核心概念,就能覆盖常见场景。
- 做页面动效前,先逛官网 Showcase 看别人用它实现过什么效果,找到接近的案例再研究实现。
- 搭配 ScrollTrigger 插件做滚动驱动动画,是它的招牌玩法。
Key features · 核心特点
GSAP 的核心特点
- 时间线(timeline)编排能力成熟,复杂序列动画不写状态机
- ScrollTrigger 是滚动驱动动画的事实标准
- 跨框架可用(React/Vue/原生),官方有 React 指南
- 2025 年起全部功能免费开放,含全部官方插件和商业用途(Webflow 收购后授权调整,细节以官网许可页为准)
