动效库别瞎堆：先按场景砍到一个主引擎

十库选型表

先问场景，再点库名

存量 jQuery 动画迁出：才轮到 Velocity。新活默认别从它开场。

anime vs GSAP：怎么二选一

经验法则：营销长页、钉住、scrub、跨组件导演 → GSAP；卡片/SVG/弹簧玩具感、不想背插件心智 → anime。

别踩的两处坑

1. WOW.js 商用许可——个人演示和商用站不是一回事；能只用 Animate.css / ScrollReveal 就少背一层风险。
2. 粘贴错乱别当真——原文末段曾把 mo.js 列表夹进「上一代库 / 原生 API」；正确归位：mo.js = 微交互；WAAPI / View Transitions = 与库组合的原生层，不是第 11 个同级「炫库」。

趋势其实就两头

专业动效在变成可默认依赖的基础设施（GSAP 插件免费化是信号之一）；另一头是浏览器原生 View Transitions / WAAPI 吃掉一部分「为过渡而引库」。库还在，职责更窄。

本站（Firefly）侧对照一句即可：滚动与时间线能力偏 GSAP 一脉；页面过渡走 Swup，和 Barba 的 MPA 过渡同类问题、不同实现——选型时分清「滚动叙事」和「路由/整页过渡」，别混进同一引擎硬扛。

GSAP 现已全员免费（附录）

同日另一篇公众号专讲许可拐点，差分钉在这里，不复读上面的十库对照。

官网顶栏写得很直白：GSAP is now free for everyone, thanks to Webflow's support! 文称 2024 全面免费（含原 Club 插件）；商业能不能用、有没有例外，仍以官网许可页为准，别拿转载当合同。

短历程：Flash 年代的 GreenSock → 迁到 JS / 现代 Web → 插件生态把 ScrollTrigger / MorphSVG / SplitText 做成标配技能树 → Webflow 托底后的免费里程碑。知道这条弧线，就能理解为什么「以前劝你先看预算」的说法过期了。

还值一提的核心（细节去官方 docs，别在笔记里背手册）：

• 性能取向贴着 requestAnimationFrame
• API 面：to / from / fromTo，目标可到 CSS / SVG / 普通对象
• Easing + Timeline（多段编排才是它吃饭的家伙）
• 跨 DOM / SVG / Canvas / 框架旁路
• 插件：ScrollTrigger、Draggable、MorphSVG、SplitText…

和 anime 怎么二选一，见上文「anime vs GSAP」——这里只补一句：免费化之后，别再因为「Club 插件要钱」默认降级到轻量库；体积与心智成本仍是真实约束。

四个最短 snippet（认 API 形状即可）：

1
// ScrollTrigger
2
gsap.to(".box", {
3
  x: 200,
4
  scrollTrigger: { trigger: ".box", start: "top 80%", scrub: true },
5
});
6

7
// MorphSVG
8
gsap.to("#circle", { duration: 1, morphSVG: "#hippo" });
9

10
// SplitText
11
const split = new SplitText(".title", { type: "chars,words" });
12
gsap.from(split.chars, { y: 40, opacity: 0, stagger: 0.03 });
13

14
// Draggable
15
Draggable.create(".knob", { type: "x,y", bounds: ".stage" });

资源：gsap.com/docs（旧 greensock.com/docs 多半会跳转）、官网 Forums / Community。写 GSAP 前先翻官方文档，别在中文二手安利里绕圈。