交互使用 GSAP 及其插件（ScrollTrigger、SplitText、ScrambleText、MotionPath、CustomEase）为页面添加动画，许多获奖网站背后都是这个引擎。每个交互都有一个触发器和一条由步骤组成的时间轴。
从预设开始
选中一个元素，打开检查器的 Interactions 标签页，点击 Add 并选择一个预设。
Fade in on load页面加载时，元素淡入。
Slide up on scroll元素进入视口时向上滑动并淡入。
Parallax滚动时比页面移动得更慢，进度与滚动位置同步。
Hover scale悬停时略微放大，移开后恢复原状。
Custom从空白时间轴开始，构建你自己的动画。
触发器
| 触发器 | 何时播放 | 选项 |
|---|---|---|
| Load | 页面加载时 | — |
| Scroll | 目标滚动进入视口时 | start、end、随滚动同步（scrub） |
| Hover | 指针进入目标时；移开时反向播放 | 目标 |
| Click | 点击目标时；再次点击反向播放 | 目标 |
无论触发器是什么，任何交互都可以通过工作流中的 Play interaction 步骤来播放。
滚动触发器
Scroll into view 触发器使用 GSAP ScrollTrigger。On 是启动它的元素。
- Start 和 End 都由两个词组成：先是元素上的一个点，再是窗口上的一个点。
top 80%表示元素顶部到达窗口高度 80% 处时开始。bottom top表示元素底部离开窗口顶部时结束。也支持top bottom-=100这样的偏移。End 留空则自动计算结束位置。 - Scrub 把动画与滚动位置绑定：在 Start 和 End 之间，向下滚动时动画前进，向上滚动时动画后退。Parallax 就使用了它。
- 不开启 scrub 时，动画会在元素到达 Start 时播放一次，并停留在结束状态。
构建时间轴
打开一个交互即可看到它的步骤。每个步骤有以下几行：
| 行 | 设置内容 |
|---|---|
| Target | 该步骤要动画的元素 |
| From / To | 属性的起始值和结束值；点击 + 添加属性。只设 From 时，从这些值动画到当前设计；只设 To 时，从当前设计动画到这些值。 |
| Effect | 无、Split text、Scramble text 或 Motion path（参见效果） |
| Timing | D 时长和 W 等待（延迟），单位为秒 |
| Stagger | 该步骤所动画的各元素之间的间隔（参见交错） |
| Ease | 速度曲线，包括 Custom curve…（参见缓动） |
| Position | 步骤在时间轴上的位置：-=0.3 表示与上一步重叠，< 表示与上一步同时开始。留空表示在上一步之后。 |
属性值
每个属性都有与之匹配的字段，并显示单位：
| 属性 | 字段 |
|---|---|
opacity、autoAlpha | 百分比，0–100%，与 Design 标签页中的 Opacity 相同。autoAlpha 在 0% 时还会隐藏元素。 |
x、y | 像素 |
xPercent、yPercent | 元素自身尺寸的百分比 |
rotate、rotateX、rotateY、skewX、skewY | 度 |
scale、scaleX、scaleY | 倍数：1 为设计尺寸，0.9 为 90% |
borderRadius | px、% 或 rem |
color、backgroundColor | 颜色选择器 |
filter、clipPath | CSS 文本，例如 blur(8px) 或 inset(0 0 100% 0) |
拖动数值字段的图标即可快速调整数值。带有警告标记的步骤包含无法播放的值；打开它，问题会列在步骤下方。
交错
一个步骤会为它匹配到的每个元素添加动画：集合列表的每个条目，或拆分文本的每个片段。Stagger 会错开它们的开始时间。
- Each 设置相邻两个元素之间的秒数。Total 设置所有元素加起来的总秒数，与元素数量无关。
- From 选择级联从哪里开始：Start、Center、End、Edges 或 Random。
- Grid 按网格中条目之间的距离交错，例如按行排列的卡片，这样级联会从 From 向两个方向扩散。
json
"ix_cards": {
"trigger": { "type": "scroll", "target": "n_list", "start": "top 80%" },
"timeline": [
{ "target": "n_card", "from": { "y": 60, "autoAlpha": 0 }, "stagger": { "each": 0.08, "from": "center", "grid": "auto" }, "duration": 0.6 }
]
}
只设置了 Each 且从 Start 开始的交错会保存为一个数字（"stagger": 0.1）。
效果
Effect 为步骤添加一个 GSAP 插件。每个步骤选择一个：
| 效果 | 作用 | 行 |
|---|---|---|
| Split text | 把目标的文本拆分为 Chars、Words 或 Lines，并为每个片段添加动画。会自动加上一个较小的交错。Mask 把每个片段裁剪在各自的盒子里，适合从下方升起的文字效果。 | Split |
| Scramble text | 先显示随机字符，再逐渐还原为目标自己的文本。 | Scramble：字符集（ABC、abc、AbC、123、#$%）和 Spd（速度） |
| Motion path | 让目标沿着一条路径移动，路径相对于它当前的位置。 | Path：SVG 路径数据，例如 M0,0 C80,-80 160,80 240,0。Rotate：Follow the path 让元素随曲线转动。 |
按字符显示文本：
json
{ "target": "n_h1", "from": { "yPercent": 100 }, "split": { "type": "chars", "mask": true }, "stagger": 0.03, "duration": 0.6 }
缓动
Ease 决定步骤过程中速度如何变化。列表中包含 GSAP 的缓动（power2.out、back.out(1.7)、elastic.out(1, 0.3) 等），另外还有：
rough：抖动、颤动的运动。slow(0.7, 0.7, false)：先快，中间变慢，然后再快。expoScale(0.5, 7)：用于需要感觉均匀的缩放变化，例如放大镜头。- Custom curve…：显示一个 Curve 行。输入四个数字组成的 cubic-bezier（
0.25, 0.1, 0.25, 1，与 CSScubic-bezier()相同），或来自 GSAP 缓动可视化工具的 SVG 路径数据。选择一个命名缓动即可切回。
预览
在设计模式下，元素停留在最终状态，方便你编辑。点击交互上的播放按钮预览单个交互，或按 ⌘↵ 预览整个页面。
时间轴面板
时间轴面板以秒为刻度，用横条显示一个交互的各个步骤，让你一眼看清并调整时间安排。它在设计模式下工作；在预览中运行的则是真实的交互。
- 打开面板：点击工具栏中的 Timeline 按钮，或按 ⌥T。在检查器的 Interactions 标签页中，交互上的 Open in timeline 按钮会打开面板并定位到该交互。面板停靠在画布下方；拖动其上边缘可调整高度，面板会记住这个高度。
- 选择交互：在左上角的菜单中选择。旁边的标签会显示它的触发器。
- 拖动播放头：在标尺上或空白轨道区域按下或拖动，即可移动播放头，画布会显示该时刻的动画。标尺获得焦点时，方向键每次将播放头移动 0.01 s（按住 ⇧ 为 0.1 s）， Home / End 跳到开头或结尾。
- 播放：播放控制区显示当前时间和总时长，并提供 Go to start、Play、Go to end、Loop 和播放速度（0.25x、0.5x、1x 或 2x；点击切换）。
- 缩放：使用 Zoom in、Zoom out 和 Fit timeline 按钮，或在轨道上 ⌘ + 滚动。
在时间轴上编辑步骤
- 拖动横条可在时间上移动步骤，拖动其右边缘可修改时长。边缘会吸附到 0、播放头和其他横条；按住 ⌥ 可关闭吸附。一次拖动就是一步撤销。
- 左侧的图层列显示每个步骤的目标名称。点击名称即可选中该图层（Shift 或 ⌘ + 单击可加选）。选中图层所在的行会高亮显示。
- 使用键盘：点击或用 Tab 键聚焦到一个横条，然后用 ← / → 把步骤移动 0.01 s（按住 ⇧ 为 0.1 s），用 ⌥← / ⌥→ 调整时长，用 ⌥↑ / ⌥↓ 在列表中上移或下移。 ↵ 选中其图层， ⌦ 或 ⌫ 删除该步骤， ⌘D 创建该步骤的副本。在同一个横条上连续按方向键只算一步撤销。
- 右键单击横条可使用 Select layer、Duplicate step、Move up、Move down 和 Delete step。
- 面板标题栏中的步骤工具：Add step 为选中的图层添加一个步骤（未选中任何图层时，为当前步骤的图层添加），对于当前步骤，你还可以设置缓动、Duplicate step 或 Delete step。一个交互始终至少保留一个步骤。
- 交错显示为横条后面的一段尾巴，长度按该步骤实际动画的元素数量计算，例如集合列表的条目或拆分文本的片段。Grid 交错的尾巴长度是估算值。
测试触发器
- Hover 交互提供 Hover in，正向播放时间轴；以及 Hover out，从播放头位置反向播放。
- Click 交互提供 Simulate click，正向播放时间轴；播放头到达结尾后，再点一次则反向播放，就像第二次点击一样。
- 随滚动同步的 Scroll 交互会把播放头显示为滚动的百分比。
按断点设置
交互可以只在部分断点生效，例如只在桌面上使用视差效果。
想让交互由逻辑启动，例如在表单提交之后？请使用 Play interaction 工作流步骤。