Composition · 00:00

把网页动画写成一条时间线

这是一份给独立开发者用的 GSAP 3.15 技术手册：核心 API 拆开讲，经典效果单独成页。 下面这条轨道就是本站的工作方式——补间在时间上移动，而不是堆 CSS transition。

gsapdoc.cqassh.cn · 仅使用官方免费核心与插件

00:01为什么用 GSAP

  • 性能稳定：优先走 transform / opacity，少触发布局。
  • 时间线编排：多段补间可倒放、seek、改倍速。
  • 滚动场景：ScrollTrigger 覆盖进入视口、scrub、pin、横向滚。
  • 框架无关：原生页或 React/Vue 都能用；组件卸载时用 gsap.context() 清理。

00:02安装（CDN）

先加载核心库，再加载插件
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
</script>

00:03三个核心概念

概念是什么典型 API
Tween 一段从 A 到 B 的补间 gsap.to / from / fromTo / set
Timeline 把多个 Tween 编成可整体控制的轴 gsap.timeline()
Plugin 给核心库加滚动、拖拽、路径等能力 gsap.registerPlugin(...)
常见坑：gsap.from() 创建瞬间会把元素放到 from 状态。延迟入场请看文档里的 immediateRender。

00:04功能文档

00:01

核心方法

to / from / fromTo / set 的差异与选用
00:02

动画参数 Vars

duration、repeat、yoyo、overwrite、回调
00:03

CSS / Transform

x、scale、rotation 与 autoAlpha
00:04

缓动 Easing

power / back / elastic / bounce / steps
00:05

Stagger

each、from、grid 做队列与矩阵
00:06

Timeline

位置参数、标签、keyframes
00:07

实例控制

play、quickTo、context、matchMedia
00:08

Utils

mapRange、clamp、interpolate、wrap
00:09

ScrollTrigger

start、end、scrub、pin、toggleActions
00:10

常用插件

Flip、Draggable、Text、MotionPath、Observer

分镜库 · 案例

每个案例一页，互不挤在同一个 HTML。案例不是序号教程，按你要做的效果进。

SHOT

开场预加载

进度条与遮罩退出
SHOT

拆字标题

overflow 揭字 + stagger
SHOT

磁性按钮

quickTo 跟随指针
SHOT

3D 卡片

perspective + rotateX/Y
SHOT

图片揭示

clip-path 擦除入场
SHOT

无限跑马灯

xPercent 无缝循环
SHOT

数字计数

对象 tween + snap
SHOT

横向画廊

pin 映射竖向滚动
SHOT

钉住叙事

scrub 时间线讲故事
SHOT

自定义光标

双层延迟跟随
SHOT

Flip 画廊

筛选时记录布局
SHOT

全屏菜单

一条时间线控制开关

00:05推荐学习路径

  1. 核心方法 → Vars → CSS/Transform → Easing
  2. Stagger → Timeline
  3. 实例控制 + Utils
  4. ScrollTrigger + 横向滚 / 钉住叙事
  5. Flip / Draggable / TextPlugin