什么是ScrollTo
<header>
<h1>案例 29：ScrollTo 平滑滚动</h1>
<button id="to-second">滚动到第二屏</button>
</header>
<section>
<div class="panel">第一屏内容</div>
</section>
<section id="second">
<div class="panel">第二屏内容</div>
</section>
<section>
<div class="panel">第三屏内容</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollToPlugin.min.js"></script>
<script>
const button = document.querySelector("#to-second");
// 注册 ScrollToPlugin
gsap.registerPlugin(ScrollToPlugin);
button.addEventListener("click", () => {
gsap.to(window, {
duration: 1,
scrollTo: "#second",
ease: "power2.out"
});
});
</script>
ScrollToPlugin 是 GSAP（GreenSock Animation Platform） 提供的一个轻量级但非常实用的插件，用于实现 平滑、可控的页面滚动动画——无论是滚动到页面某个元素、指定坐标，还是精确控制滚动行为。
📌 简单定义：
ScrollToPlugin 让你用 GSAP 的动画语法（如 duration、ease）驱动浏览器窗口或任意可滚动容器，平滑滚动到目标位置。
它解决了原生 window.scrollTo() 只能“瞬间跳转”或简单 behavior: 'smooth' 缺乏控制的问题。
✅ 核心能力：
1. 滚动到多种目标
// 滚动到元素（通过选择器或 DOM 节点）
scrollTo: "#second"
scrollTo: document.querySelector(".footer")
// 滚动到具体坐标
scrollTo: { y: 500 } // 垂直滚动到 500px
scrollTo: { x: 200, y: 300 } // 水平 + 垂直
// 滚动到页面顶部/底部
scrollTo: { y: "top" }
scrollTo: { y: "bottom" }
// 滚动到元素并预留偏移（如避开固定导航栏）
scrollTo: { y: "#section", offsetY: 80 }
2. 完全控制动画体验
-
duration: 滚动持续时间（秒）
-
ease: 缓动函数（如 "power2.out"、"expo.inOut"）
- 可暂停、反向、加入时间轴（Timeline）
3. 支持任意可滚动容器
不仅限于 window，也可用于 <div style="overflow: auto"> 等局部滚动区域：
gsap.to(scrollableDiv, {
duration: 1,
scrollTo: { y: 1000 }
});
🔧 在你的代码中：
gsap.to(window, {
duration: 1,
scrollTo: "#second", // 平滑滚动到 id="second" 的 <section>
ease: "power2.out" // 先快后慢的缓动效果
});
点击按钮后：
- 页面不会“瞬间跳转”到第二屏；
- 而是用 1 秒时间，以 优雅的缓动曲线 滚动到
#second 元素的顶部；
- 用户体验更自然、专业。
🌟 典型应用场景：
| 场景 |
示例 |
| 导航跳转 |
点击菜单项平滑滚动到对应章节 |
| “回到顶部”按钮 |
带缓动的返回顶部动画 |
| 表单错误定位 |
提交失败时滚动到第一个错误字段 |
| 交互式故事页 |
按钮触发滚动到下一情节 |
| 局部滚动容器 |
在聊天窗口中自动滚动到底部 |
⚙️ 高级选项（常用）：
scrollTo: {
y: "#target",
offsetX: 0, // 水平偏移
offsetY: 60, // 垂直偏移（常用于避开固定头部）
autoKill: true // 用户手动滚动时自动中断动画（默认 true）
}
🆚 对比原生方案：
| 方式 |
控制力 |
缓动 |
中断处理 |
兼容性 |
window.scrollTo({ behavior: 'smooth' }) |
低 |
仅线性 |
差 |
现代浏览器 |
ScrollToPlugin |
高 |
任意 GSAP 缓动 |
智能中断 |
全浏览器（含 IE11） |
⚠️ 注意事项：
- 必须注册插件：
gsap.registerPlugin(ScrollToPlugin)
- 目标元素必须已存在于 DOM 中
- 如果结合
ScrollSmoother（平滑滚动容器），需使用其 API 而非直接操作 window
📚 官方文档：
👉 greensock.com/docs/v3/Plu…
✅ 总结：
ScrollToPlugin 是 GSAP 中实现“专业级页面导航动画”的标准工具——它用极简的代码，赋予滚动行为电影般的流畅感和精准控制，是提升网站交互质感的必备插件。
什么是SplitText
<div class="card">
<h1 id="headline">SplitText 可以拆分文字做逐字动画</h1>
<button id="play">逐字出现</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/SplitText.min.js"></script>
<script>
const headline = document.querySelector("#headline");
const playButton = document.querySelector("#play");
// 注册 SplitText 插件
gsap.registerPlugin(SplitText);
let split;
playButton.addEventListener("click", () => {
if (split) {
split.revert();
}
// 将文字拆分为字符
split = new SplitText(headline, { type: "chars" });
gsap.from(split.chars, {
opacity: 0,
y: 20,
duration: 0.6,
ease: "power2.out",
stagger: 0.04
});
});
</script>
SplitText 是 GSAP（GreenSock Animation Platform） 提供的一个强大工具（虽然叫“插件”，但实际是一个独立的实用类），用于将 HTML 文本智能地拆分为可单独动画的 <span> 元素，从而实现精细的逐字、逐词或逐行动画效果。
📌 简单定义：
SplitText 能把一段普通文字（如 <h1>Hello</h1>）自动转换成包裹在 <span> 中的字符、单词或行，让你可以用 GSAP 对每个部分做独立动画。
例如：
<!-- 原始 -->
<h1 id="headline">你好</h1>
<!-- SplitText({ type: "chars" }) 处理后 -->
<h1 id="headline">
<span class="char">你</span>
<span class="char">好</span>
</h1>
✅ 核心功能：三种拆分模式
| 模式 |
说明 |
生成结构 |
type: "chars" |
拆分为单个字符（包括中文、英文、标点） |
每个字一个 <span class="char">
|
type: "words" |
拆分为单词（以空格/标点分隔） |
每个词一个 <span class="word">
|
type: "lines" |
拆分为视觉上的行（根据实际换行） |
每行外层包 <div class="line">
|
💡 也可组合使用：type: "words, chars" → 先分词，再把每个词拆成字。
split = new SplitText(headline, { type: "chars" });
gsap.from(split.chars, {
opacity: 0,
y: 20,
duration: 0.6,
ease: "power2.out",
stagger: 0.04 // 每个字符延迟 0.04 秒启动
});
- 点击按钮时，标题文字被拆成单个字符；
- 每个字符从下方 20px、透明的状态，依次向上淡入；
- 形成“逐字打字机”或“文字飞入”的经典动效。
⚠️ 注意：每次点击前调用 split.revert() 是为了还原原始 HTML 结构，避免重复嵌套 <span> 导致样式错乱。
🌟 为什么需要 SplitText？
如果不使用它，手动写 <span> 包裹每个字：
-
繁琐：尤其对动态内容或 CMS 内容不现实；
-
破坏语义：影响 SEO 和可访问性（屏幕阅读器）；
-
难以维护。
而 SplitText：
-
非破坏性：原始文本保持不变，仅运行时包装；
-
智能处理：正确保留 HTML 标签、空格、换行、内联样式；
-
支持复杂排版：包括多行、响应式断行（
lines 模式会监听 resize）。
🛠️ 高级特性：
-
保留原始样式：即使文字有 CSS 动画、颜色、字体，拆分后依然生效。
-
与 ScrollTrigger 结合：实现“滚动到此处时逐字出现”。
-
支持 SVG 文本（需额外配置）。
-
可自定义包裹标签：默认
<span>，也可设为 <div> 等。
⚠️ 注意事项：
-
不是免费插件：在 GSAP 3 中，
SplitText 属于 Club 会员专属功能（可试用，但商业项目需授权）。
-
不要重复拆分：务必在重新拆分前
revert()，否则会嵌套多层 <span>。
-
对 SEO 友好：因为原始 HTML 不变，搜索引擎仍能读取完整文本。
📚 官方文档：
👉 greensock.com/docs/v3/Plu…
✅ 总结：
SplitText 是 GSAP 中实现“高级文字动画”的基石工具——它将枯燥的文本转化为可编程的动画单元，让逐字淡入、弹跳、飞入等效果变得简单、可靠且专业，广泛应用于官网、片头、交互叙事等场景。
什么是TextPlugin
<div class="card">
<h1>案例 31：TextPlugin 数字滚动</h1>
<p>让文本从 0 变化到目标值。</p>
<div class="counter" id="counter">0</div>
<button id="play">开始计数</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/TextPlugin.min.js"></script>
<script>
const counter = document.querySelector("#counter");
const playButton = document.querySelector("#play");
// 注册 TextPlugin
gsap.registerPlugin(TextPlugin);
const tween = gsap.to(counter, {
duration: 1.6,
text: "1280",
ease: "power2.out",
paused: true
});
playButton.addEventListener("click", () => {
counter.textContent = "0";
tween.restart();
});
</script>
TextPlugin 是 GSAP（GreenSock Animation Platform） 提供的一个轻巧但非常实用的插件，专门用于对 DOM 元素的文本内容进行动画化更新。它最经典的应用就是实现 “数字滚动计数器” 效果（如从 0 平滑变化到 1280），但也支持普通文本的渐变替换。
📌 简单定义：
TextPlugin 能让元素的 textContent 从一个值“动画过渡”到另一个值——对于数字，它会逐帧递增/递减；对于文字，它可模拟打字、随机字符替换等效果。
✅ 核心功能：
1. 数字滚动（最常用）
gsap.to(element, {
duration: 2,
text: "1000" // 自动从当前数字（如 "0"）滚动到 1000
});
- 自动识别数字并进行数值插值；
- 支持整数、小数、带千分位格式（需配合
delimiter）；
- 可设置前缀/后缀（如
$、%）。
2. 文本替换动画
gsap.to(element, {
text: "Hello World",
duration: 1.5
});
- 默认行为：直接替换（无中间动画）；
- 但配合
delimiter 或自定义逻辑，可实现打字机、乱码过渡等（不过复杂文本动画更推荐 ScrambleTextPlugin）。
gsap.to(counter, {
duration: 1.6,
text: "1280", // 目标文本
ease: "power2.out",
paused: true
});
- 初始文本是
"0"；
- 点击按钮后，
TextPlugin 会：
- 解析
"0" 和 "1280" 都是有效数字；
- 在 1.6 秒内，将文本内容从
0 → 1 → 2 → ... → 1280 逐帧更新；
- 视觉上形成“数字飞速增长”的计数器效果。
💡 注意：每次播放前重置 counter.textContent = "0" 是为了确保动画从起点开始。
⚙️ 常用配置选项（通过 text 对象）：
gsap.to(element, {
text: {
value: "¥1,280", // 目标值
delimiter: ",", // 千分位分隔符
prefix: "¥", // 前缀（也可直接写在 value 里）
suffix: " 元", // 后缀
padSpace: true // 保持文本长度一致（防跳动）
},
duration: 2
});
🌟 典型应用场景：
| 场景 |
示例 |
| 数据看板 |
用户数、销售额、点赞数的动态增长 |
| 加载进度 |
“加载中... 78%” |
| 倒计时/计时器 |
活动剩余时间、秒表 |
| 游戏得分 |
分数变化动画 |
| 简单文本切换 |
状态提示（“成功” → “完成”） |
🆚 对比其他方案：
| 方法 |
数字滚动 |
文本动画 |
精确控制 |
性能 |
手动 setInterval
|
✅ |
❌ |
低 |
一般 |
| CSS + JS 拼接 |
⚠️ 复杂 |
⚠️ 有限 |
低 |
一般 |
TextPlugin |
✅✅✅ |
✅ |
高（GSAP 时间轴） |
优 |
⚠️ 注意事项：
-
只作用于
textContent，不会影响 HTML 标签（即不能插入 <strong> 等）；
- 如果起始或目标文本不是纯数字，则直接替换（无滚动）；
- 要实现更炫的文字扰动（如乱码过渡），应使用
ScrambleTextPlugin；
-
免费可用：
TextPlugin 是 GSAP 的标准免费插件（无需会员）。
📚 官方文档：
👉 greensock.com/docs/v3/Plu…
✅ 总结：
TextPlugin 是 GSAP 中实现“数字计数器动画”的首选工具——它用一行代码就能将静态数字变成动态增长的视觉焦点，简单、高效、且完全集成于 GSAP 动画生态系统。
什么是EasePack
<div class="card">
<h1>案例 32：EasePack 特殊缓动</h1>
<p>RoughEase / SlowMo / ExpoScaleEase 都在 EasePack 中。</p>
<div class="row">
<div>
<div class="lane">
<div class="ball" id="ballA"></div>
</div>
<div class="label">RoughEase</div>
</div>
<div>
<div class="lane">
<div class="ball" id="ballB"></div>
</div>
<div class="label">SlowMo</div>
</div>
<div>
<div class="lane">
<div class="ball" id="ballC"></div>
</div>
<div class="label">ExpoScaleEase</div>
</div>
</div>
<button id="play">播放缓动</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
<!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/EasePack.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>
<!-- CustomBounce requires CustomEase -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomBounce.min.js"></script>
<!-- CustomWiggle requires CustomEase -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomWiggle.min.js"></script>
<script>
const ballA = document.querySelector("#ballA");
const ballB = document.querySelector("#ballB");
const ballC = document.querySelector("#ballC");
const playButton = document.querySelector("#play");
// 预设三个缓动
const rough = RoughEase.ease.config({
strength: 1.5,
points: 20,
template: Power1.easeInOut,
randomize: true
});
const slowMo = SlowMo.ease.config(0.7, 0.7, false);
const expoScale = ExpoScaleEase.config(1, 3);
const timeline = gsap.timeline({ paused: true });
timeline.to(ballA, { y: 100, duration: 1.2, ease: rough }, 0);
timeline.to(ballB, { y: 100, duration: 1.2, ease: slowMo }, 0);
timeline.to(ballC, { y: 100, duration: 1.2, ease: expoScale }, 0);
playButton.addEventListener("click", () => {
gsap.set([ballA, ballB, ballC], { y: 0 });
timeline.restart();
});
</script>
RoughEase、SlowMo 和 ExpoScaleEase 是 GSAP（GreenSock Animation Platform） 中三个非常有特色的高级缓动函数（easing functions），它们都包含在 EasePack 插件中。它们超越了传统的“入/出”缓动（如 easeInOut），提供了更具创意和物理感的动画节奏。
下面分别解释它们的作用和适用场景：
1. 🌀 RoughEase —— “抖动式”缓动
✅ 作用：
模拟不规则、随机抖动的运动效果，常用于表现：
- 手绘感、草图风格
- 震动、故障、不稳定状态
- 卡通式的“弹跳后晃动”
🔧 核心参数（通过 .config() 设置）：
const rough = RoughEase.ease.config({
strength: 1.5, // 抖动强度（0~2，默认 1）
points: 20, // 抖动点数量（越多越密集）
template: Power1.easeInOut, // 基础缓动曲线（决定整体趋势）
randomize: true // 是否每次播放随机（true=更自然）
});
🎯 在你的代码中：
- 小球 A 下落时会上下轻微抖动，不是平滑移动，而是像“被手抖着拉下来”。
💡 适合：游戏中的受击反馈、加载失败提示、趣味 UI。
2. 🐢 SlowMo —— “慢动作中心”缓动
✅ 作用：
让动画在中间阶段变慢，两端加速，形成“慢镜头”效果。
特别适合强调某个关键状态（如悬停、高亮、停顿）。
🔧 核心参数：
const slowMo = SlowMo.ease.config(
linearRatio, // 中间匀速部分占比（0~1）
power, // 两端加速强度（0=线性，1=强缓出）
yoyoMode // 是否用于往返动画（true=对称）
);
例如：SlowMo.ease.config(0.7, 0.7, false)
→ 动画 70% 的时间以近似匀速缓慢进行，开头和结尾快速过渡。
- 小球 B 下落时，大部分时间缓慢移动，只在开始和结束瞬间加速，仿佛“优雅降落”。
💡 适合：产品展示、LOGO 入场、需要突出中间状态的动画。
3. 📏 ExpoScaleEase —— “指数缩放”缓动
✅ 作用：
实现基于比例（scale）或指数增长/衰减的非线性缓动。
常用于：
- 缩放动画（从 1x 到 10x）
- 音量/亮度/透明度等对数感知属性
- 模拟真实世界的指数变化（如声音衰减、光强）
🔧 核心参数：
const expoScale = ExpoScaleEase.config(startValue, endValue);
- 它会将动画值从
startValue 到 endValue 按指数曲线映射。
- 通常配合
scale、opacity 或自定义属性使用。
🎯 虽然用于 y，但效果仍体现非线性：
- 小球 C 的下落速度先快后慢（或反之，取决于范围），但变化是非线性的，比
power2 更“陡峭”。
💡 更典型用法：
gsap.to(circle, {
scale: 5,
ease: ExpoScaleEase.config(1, 5) // 从 1 倍到 5 倍的指数缩放
});
💡 适合：放大镜效果、爆炸扩散、雷达扫描、声波可视化。
🆚 对比总结：
| 缓动类型 |
视觉特点 |
典型用途 |
RoughEase |
随机抖动、不规则 |
故障风、手绘感、震动反馈 |
SlowMo |
中间慢、两头快 |
强调关键帧、优雅停顿 |
ExpoScaleEase |
指数级加速/减速 |
缩放、对数感知属性、物理模拟 |
⚠️ 注意事项：
- 这些缓动都来自
EasePack，需单独引入（如你代码中已做）；
- 它们可以像普通
ease 一样用在任何 GSAP 动画中；
- 结合
Timeline 可创建复杂节奏组合。
📚 官方文档：
✅ 总结：
RoughEase、SlowMo、ExpoScaleEase 是 GSAP 赋予动画“性格”的秘密武器——它们让运动不再机械，而是充满随机性、戏剧性或物理真实感，是打造高级交互动效的关键工具。
什么是 CustomEase
<div class="card">
<h1>案例 33：CustomEase 自定义缓动</h1>
<p>用贝塞尔曲线定义缓动曲线。</p>
<div class="track">
<div class="block" id="block"></div>
</div>
<button id="play">播放自定义缓动</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>
<script>
const block = document.querySelector("#block");
const playButton = document.querySelector("#play");
// 注册 CustomEase
gsap.registerPlugin(CustomEase);
// 创建一个自定义缓动曲线
CustomEase.create("myEase", "0.25,0.1,0.25,1");
const tween = gsap.to(block, {
x: 470,
duration: 1.4,
ease: "myEase",
paused: true
});
playButton.addEventListener("click", () => {
tween.restart();
});
</script>
CustomEase 是 GSAP（GreenSock Animation Platform） 提供的一个强大插件，允许你通过自定义贝塞尔曲线（cubic-bezier）来创建完全个性化的缓动函数（easing function），从而精确控制动画的速度变化节奏。
📌 简单定义：
CustomEase 让你像在 CSS 或设计工具中那样，用 4 个控制点定义一条缓动曲线，并将其注册为可复用的 GSAP 缓动名称，用于任何动画。
它打破了内置缓动（如 power2.inOut、elastic）的限制，实现电影级、品牌专属或物理拟真的运动节奏。
✅ 核心原理：贝塞尔曲线
缓动曲线本质是一条 三次贝塞尔曲线（Cubic Bezier），由 4 个点定义：
- 起点固定为
(0, 0)
- 终点固定为
(1, 1)
- 中间两个控制点
(x1, y1) 和 (x2, y2) 决定曲线形状
在 CustomEase 中，你只需提供这 4 个数值（按顺序）：
" x1, y1, x2, y2 "
例如你的代码：
CustomEase.create("myEase", "0.25,0.1,0.25,1");
表示：
- 控制点 1:
(0.25, 0.1)
- 控制点 2:
(0.25, 1)
这条曲线的特点是：启动非常快（y1 很低），然后突然减速并平稳结束，形成一种“急冲后刹车”的效果。
🔧 使用步骤：
-
引入插件
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>
-
注册自定义缓动
CustomEase.create("myEase", "0.25,0.1,0.25,1");
- 第一个参数：缓动名称（字符串，如
"myEase"）
- 第二个参数：贝塞尔控制点（4 个 0~1 之间的数字，用逗号分隔）
-
在动画中使用
gsap.to(block, {
x: 470,
duration: 1.4,
ease: "myEase" // 直接使用注册的名称
});
🌟 优势 vs 其他方式：
| 方式 |
灵活性 |
可视化 |
复用性 |
性能 |
CSS cubic-bezier()
|
✅ |
✅（开发者工具） |
❌（需重复写） |
✅ |
| 手动计算进度 |
❌ |
❌ |
❌ |
⚠️ |
CustomEase |
✅✅✅ |
✅（配合 GSAP 工具） |
✅✅✅（全局注册） |
✅✅（预计算优化） |
💡 CustomEase 会预计算并缓存曲线数据，运行时性能极高，适合复杂动画。
🛠️ 如何获取贝塞尔值？
-
使用 GSAP 官方工具（推荐！）
👉 GSAP Ease Visualizer
- 拖动控制点实时预览动画
- 自动生成
CustomEase 代码
-
从 CSS 复制
如果你在 CSS 中写了：
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
那么值就是 "0.25,0.1,0.25,1"
-
从 Figma / After Effects 导出
许多设计工具支持导出贝塞尔缓动参数。
🎨 典型应用场景：
| 效果 |
贝塞尔示例 |
用途 |
| 弹性回弹 |
"0.68,-0.55,0.27,1.55" |
按钮点击反馈 |
| 缓入缓出加强版 |
"0.33,0,0.67,1" |
平滑过渡 |
| 快速启动+慢速结束 |
"0.25,0.1,0.25,1"（你的例子） |
强调终点状态 |
| 延迟启动 |
"0.5,0,0.75,0" |
悬停后才开始动画 |
⚠️ 注意事项：
- 所有数值必须在 0 到 1 之间（超出会导致不可预测行为）；
- 注册一次后，可在整个项目中复用（如
"brandBounce"、"softEase"）；
-
免费可用：
CustomEase 是 GSAP 的标准插件（无需 Club 会员）；
- 若需更复杂曲线（如多段），可结合
CustomWiggle 或 CustomBounce（它们依赖 CustomEase）。
📚 官方资源：
✅ 总结：
CustomEase 是 GSAP 中实现“精准运动设计”的终极工具——它把缓动从“选择预设”升级为“自由创作”，让开发者和设计师能用同一套语言定义品牌专属的动画节奏，是打造高端用户体验的核心技术之一。
登录
