GSAP 动画

GSAP 核心概念实验室：补间、缓动曲线、Timeline 时间轴、stagger 交错、ScrollTrigger 与 scrub，用自写的补间引擎逐帧复现，并给出对应的 GSAP 写法。

技术栈: tween / ease, Timeline, stagger, ScrollTrigger 原理, Canvas 2D

• 时间轴 Timeline — 多段补间按时间轴编排，重叠衔接后 yoyo 倒放。
• 滚动触发 ScrollTrigger — 区块滚过触发线时，卡片随滚动进度滑入、淡入。
• 文字交错动画 — 逐字拆分 + stagger 的标题入场。
• 弹跳入场 — 弹跳入场：小球落地后按 bounce.out 缓动反弹几次，每次弹起都比上次低。
• 交错卡片 — 交错入场：一组卡片做同一个动画，但每张比前一张晚一点开始（stagger 间隔）。
• 路径跟随 — 让物体沿着一条预先画好的路线移动。
• 旋转出场 — 方块一边旋转一边缩小、变透明直到消失（ease: power3.in，越转越快），然后从很小的状态用 bac…
• 弹性缩放 — 像拉开再松手的橡皮筋，元素放大时会冲过目标大小、来回晃几下再停住。
• 颜色闪烁 — GSAP 可以直接对颜色做补间——它会把颜色拆成红、绿、蓝三个数字，分别从旧值平滑过渡到新值。
• 翻转牌 — 让卡片绕竖直中线转 180°，转过 90° 时正好侧对我们（宽度变成 0），之后看到的就是背面。
• 进度环 — 圆环的弧长从 0 增长到目标百分比，就像加载进度或者运动 App 的「圆环」。
• 打字机 — 时间轴上每隔固定时间「多显示一个字」，看起来就像有人在打字；全部打完停 1 秒，再用一半的时间一个字一个字删掉。
• 视差层 — 坐车时近处的树飞快后退，远处的山却慢慢移动，大脑就靠这种速度差判断远近。
• 网格交错 — stagger 的 grid 和 from 选项可以让延迟按「离起点的距离」来算，于是动画像水波一样从起点一…
• 时间轴拖动 scrub — scrub 时间轴：动画进度不再自己播放，而是跟着拖动/滚动位置走，拖到哪动画就到哪。