在这篇教程里，我们要创建一个包含多种流行 GSAP 动画的自定义时间轴（timeline），并把它集成到 Bricks Builder 中。
目录
引言
我们最近发布了一篇完整的 GSAP 入门文章，篇幅很长、干货满满。
现在该实践理论了！下面是一个具体的 Hero 区块示例：用一个时间轴串起六种流行的补间（tween），营造出舒服又现代的入场动画。
前置要求
这篇入门文章里的环境全部搭建好并正常运行（即 Bricks 中已启用 GSAP JavaScript Helper 脚本）。
DOM 结构
先看参考用的 DOM 结构：
设置 data-attributes
时间轴容器
第一步：在 Section（区块）元素上创建一个新的时间轴并命名——本例叫 tl1。
设置以下属性：
- data-tl-container: true
- data-tl-name: tl1
补间动画
我们会在内部元素上设置六种不同的动画，全部挂到刚创建的时间轴上，各自带自定义的顺序（order）、位置（position）、选项（options）、类型（type）和选择器（selector）。
逐个来看！
背景色滑动
第一个动画是区块的背景色从左到右滑入。由于所有补间都必须是时间轴容器的子元素，我创建了一个名为 Wrapper 的块（Block）元素，用它来动画化 inset box-shadow 属性。
在样式设置里，我填好了想要的最终 box-shadow：
然后加上以下属性：
- data-tl-name: tl1
- data-tl-tween: from
- data-tl-tween-order: 0
- data-tl-tween-options:
{
"options":{
"boxShadow":"0vw 0px 0px 0px #e5e5cb inset",
"duration":"1.5",
"ease":"Expo.easeInOut"
}
}因为用的是 from 动画类型，脚本会把 inset box-shadow 的宽度设为 0vw 作为初始状态，然后动画到最终状态——本例中是 70vw。我还设置了自定义时长和缓动函数。
图片揭示
接下来做图片掉落效果。我们瞄准 Right col 元素，对 clip-path 属性应用自定义动画：初始状态把元素完全隐藏，最终状态显示为完整可见的矩形。
属性如下：
- data-tl-name: tl1
- data-tl-tween: fromTo
- data-tl-tween-order: 1
- data-tl-tween-position: <
- data-tl-tween-options:
{
"options":{
"from":{
"clipPath":"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"
},
"to":{
"clipPath":"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
"duration":"1.5",
"ease":"Expo.easeInOut"
}
}
}注意 position 值我填的是 <：告诉 GSAP 让这个补间和上一个补间同时开始——看起来就是一起在动。时长也和上一个补间设成一样，这样两者同时开始、同时结束。
图片缩小
在 Image（图片）元素本身做缩小（zoom-out）效果。把图片的初始状态设为最终状态的 1.5 倍大小。要做视差（parallax）效果，记得在 Col Right 元素上把 overflow 设为 hidden：
图片元素上的属性设置：
- data-tl-name: tl1
- data-tl-tween: from
- data-tl-tween-order: 2
- data-tl-tween-position: <
- data-tl-tween-options:
{
"options":{
"scale":"1.5",
"duration":"3.5",
"ease":"Power4.easeOut"
}
}这个缩放动画和前面几个补间同时开始，但时长是它们的两倍多——所以前几个动画结束后，图片还会继续缩小。
标题逐字揭示
这个动画比其他几个稍微绕一点，稳住！
我们要给标题文本的每一个字母做 stagger（错峰）动画。为此需要加载一个叫 Splitting.js 的小库，它会把每个字母包进一个 span 容器，同时带上一个 .char 类，方便我们精准定位做动画。
所以，先在这里下载库，把 splitting-lite.min.js 加载到页面里，然后加上下面的 JavaScript 代码：
window.addEventListener('DOMContentLoaded', () => {
const splitChars = document.querySelectorAll('.split-chars');
splitChars.forEach(target => Splitting({target: target}));
})以及下面的 CSS：
.split-chars .word {
display: inline-block;
line-height: 1em;
overflow: hidden;
}
.split-chars .char {
display: inline-block;
}重要提醒：库和上面的 JS 脚本都必须先于 GSAP JavaScript Helper 脚本运行。
接下来，拆分脚本会作用于页面里所有带 .split-chars 类的元素。
把该类加到我们的标题元素上：
注意我们还加了一个 .header 类——稍后用来区分标题和基础文本的字母动画。
看一下生成的 DOM：
很好！现在可以把单个字母作为自定义选择器来瞄准了。Header 元素上的属性设置：
- data-tl-name: tl1
- data-tl-tween: fromTo
- data-tl-tween-order: 3
- data-tl-tween-position: > -2.8
- data-tl-tween-selector: .header.split-chars .char
- data-tl-tween-options:
{
"options":{
"from":{
"yPercent":"100"
},
"to":{
"yPercent":"0",
"stagger":"0.02"
}
}
}简单说：每个字母从下往上位移，错峰间隔 0.02 秒。
注意到没有？这次 position 属性的比较符号方向和前面几个相反了（> 开头）。意思是：我们要在上一个补间结束前 2.8 秒就开始这个错峰动画。
基础文本揭示
Basic text（基础文本）元素重复同样的逻辑，不过这次不加错峰。
给基础文本元素加上 .text 和 .split-chars 两个类：
然后设置以下 data-attributes：
- data-tl-name: tl1
- data-tl-tween: fromTo
- data-tl-tween-order: 4
- data-tl-tween-position: > -0.3
- data-tl-tween-selector: .text.split-chars .char
- data-tl-tween-options:
{
"options":{
"from":{
"yPercent":"100"
},
"to":{
"yPercent":"0",
}
}
}按钮上滑与背景色动画
最后一个动画，展示多个补间作用在同一个元素上：先把 Icon List 元素上滑，再跑一个背景色动画。
做法是用分号 ; 分隔两个不同的 JSON 对象。
属性设置：
- data-tl-name: tl1
- data-tl-tween: fromTo
- data-tl-tween-order: 5
- data-tl-tween-position: > -0.1
- data-tl-tween-options:
{
"options":{
"from":{
"yPercent":"40",
"autoAlpha":"0"
},
"to":{
"yPercent":"0",
"autoAlpha":"1"
}
}
};{
"options":{
"boxShadow":"rgb(211, 211, 186) 0px 0px 0px 0px inset"
},
"type":"from",
"position":"> -0.5"
}第一个 JSON 对象里，我们同时动画 translateY 和 autoAlpha（可以理解成 opacity）属性，做出上滑效果。
第二个 JSON 对象里，像第一个补间那样动画 inset box-shadow。
结论
一切正常的话，最终效果就是开头截图的样子——一个时间轴、六个补间，Hero 区块整体丝滑入场。
Happy tweening!