GSAP 正式宣布完全免费，SplitText、MorphSVG 等高级插件全面开放

资讯 2025年05月03日12:34

2025年4月29日，知名前端动画库 GSAP（GreenSock Animation Platform）发布了 v3.13 版本，并宣布其全部功能和插件，包括以往仅限付费会员使用的 SplitText、MorphSVG 等高级插件，现已全面免费开放，且可用于商业用途。这一重大变革得益于 Webflow 的支持，标志着前端动画开发迈入了一个全新的自由时代。

GSAP 官网：https://gsap.com/

GSAP：前端动画的黄金标准

GSAP 是由 GreenSock 团队开发的高性能 JavaScript 动画库，广泛应用于网页、SVG、Canvas、WebGL 等动画场景。其强大的时间轴控制、插件扩展能力和卓越的性能表现，使其成为众多开发者和设计师的首选工具。

全面免费的插件：SplitText 与 MorphSVG

SplitText：文本动画的利器

SplitText 插件可将 HTML 元素的文本内容拆分为单独的字符、单词或行，便于实现精细的文本动画效果。在 v3.13 版本中，SplitText 进行了全面重写，带来了以下改进：

文件体积减小 50%，加载速度更快

新增 14 项功能，包括响应式重排、深度切分、内置可访问性支持等

支持自动为屏幕阅读器添加 aria-label，提升无障碍体验

新增 deepSlice 功能，智能处理跨多行的嵌套元素

支持遮罩动画效果，方便实现“揭示”类动画

MorphSVG：SVG 形状变换的神器

MorphSVG 插件允许开发者通过简单的代码，实现 SVG 路径之间的平滑变形。例如，将一个圆形变换为一个复杂图形，只需一行代码：

gsap.to("#circle", { duration: 1, morphSVG: "#hippo" });

该插件自动处理路径点的匹配和补间，极大简化了 SVG 动画的开发流程。

如何获取和使用 GSAP 及其插件

现在，所有 GSAP 插件均已集成至主库中，开发者可通过以下方式获取：

NPM 安装：

npm install gsap

CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MorphSVGPlugin.min.js"></script>

直接下载：访问 GSAP 官网下载完整包 3.13 release。https://gsap.com/blog/3-13/

使用时，只需在代码中注册所需插件：

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(SplitText, MorphSVGPlugin);