在前端開發這個圈子里，GSAP（GreenSock Animation Platform）那可是大名鼎鼎，一直被公認為是動畫效果的“天花板”。

以前呢，GSAP 部分高級功能得付費才能用，這把不少開發者攔在了門外。

可就在最近，GSAP 官方宣布了一個讓大家都特別興奮的消息：GSAP 完全免費啦！

在 Webflow 的支持下，現在 GSAP 的所有功能，包括那些之前只有付費會員才能用的高級插件，像 SplitText 和 MorphSVG 啥的，全都免費開放了。

這簡直就是給前端開發者發了個超大福利，讓大家都能夠輕松做出超炫的動畫效果。

GSAP 團隊現狀

GSAP 現在完全免費了，那是不是意味著團隊就不維護了呢？

完全不用擔心！GSAP 的核心團隊 —— Jack、Cassie 和 Rodrigo，還會繼續維護和更新 GSAP。

他們和 Webflow 團隊一起搞研發，讓 GSAP 不斷進步。以后咱們用 GSAP 做動畫，肯定會有更多新功能和更好的體驗。

現在想用 GSAP 全套工具，那太容易了。

所有插件都放到 GSAP 的主 GitHub 倉庫和 NPM 包里了。

你可以直接去 gsap.com 下載，或者用 NPM 安裝，分分鐘就能搞定。

對于以前支持 GSAP 的會員們，GSAP 團隊也很感激。所以會員們現在不用再搞什么私有倉庫訪問步驟、不用再管那些令牌了，直接從公共 NPM 倉庫安裝就行。

而且以后也不用再付費續費了，省事兒又省錢。在論壇里的徽章還會更新，感謝他們曾經的支持，這也是對他們的一種肯定。

GSAP 案例展示

SplitText 插件升級

SplitText 插件本來就很受歡迎，它能把 HTML 元素的文本拆分成字符、單詞或者行，方便做出各種漂亮的交錯動畫。

這次 GSAP 3.13 版本更新，SplitText 插件直接被重寫，體積還縮小了 50%，功能卻增加了 14 個。這就好比你以前的一個舊玩具，現在被重新改造了，不僅變小了，還能玩出更多花樣。

新增功能詳解：

• 屏幕閱讀器能識別了：給拆分后的元素加了 aria-label，新創建的那些行、單詞、字符元素加了 aria-hidden，這樣一來，使用屏幕閱讀器的用戶也能正常訪問這些內容了，更貼心了。
• 響應式設計更好搞了：有了 autoSplit 和 onSplit()，以后調整窗口大小或者字體加載的時候，不會再出現奇怪的換行情況了。而且它還能自動清理和恢復動畫，這簡直不要太方便。
• 嵌套元素也能輕松搞定了：以前那些跨越多行的嵌套元素，比如 <span>、<strong>、<a>，處理起來可能有點麻煩。現在好了，用 deepSlice 選項，這些元素都能輕松切片，動畫效果想怎么整就怎么整。
• 遮罩效果更簡單了：它能給字符、單詞或者行外面再包一層裁剪元素（<div>），這樣就能很輕松地做出遮罩或者揭示的效果，動畫更有層次感。
• 目標選擇更靈活了：新增了 propIndex 功能，能用遞增的 CSS 變量，比如 --word: 3，這樣在選擇目標元素的時候更靈活了，動畫效果也能更精準地控制。
• 能忽略特定元素了：比如有些 <sup> 元素，你不想讓它被拆分，就可以設置忽略它，這樣在做動畫的時候就更符合自己的需求了。
• 表情符號和非拉丁語系字符更精準了：SplitText 對這些特殊字符的處理精度提高了，動畫效果更好看了。
• 復雜場景也能應對了：可以通過自定義正則表達式或者 prepareText() 函數，來處理一些特殊的、復雜的場景，動畫的適用范圍更廣了。
• 新增了回調函數：有了 onSplit() 和 onRevert() 回調，能更好地控制動畫的流程，讓動畫的執行更加可控。
• wordDelimiter 選項更強大了：可以用正則表達式、定義替換文本，而且一致性更好了，處理單詞分隔更方便了。
• smartWrap 智能換行：在只拆分字符的時候，能防止出現不自然的單詞斷裂，動畫效果更流暢。
• 能獨立運行了：SplitText 現在不用加載 GSAP 核心庫也能用了，使用場景更廣泛了。

動畫到 CSS 變量的值

GSAP 3.13 還有個超實用的新功能，那就是支持把 CSS 屬性動畫化為某個 CSS 變量的值。比如說：

gsap.to(".target", { color: "var(--my-color)" });

以前 GSAP 就能直接動畫化 CSS 變量本身的值：

gsap.to(".target", {"--my-color": "#ff0033"});

現在呢，你可以讓一個 CSS 屬性的值跟著某個 CSS 變量的值來變化。這就讓動畫的制作更加靈活了，代碼也更簡潔易懂，開發效率直接提升。

Webflow 集成簡化，輕松上手

對于用 Webflow 做網站的人來說，現在集成 GSAP 更容易了。

直接在 Webflow 的設置面板里啟用 GSAP 集成就行，然后勾選一下需要的插件。這大大降低了上手難度，新手也能快速把 GSAP 的動畫效果加到自己的網站里。

現在，如果你想讓你的網站或者項目更有吸引力，那就別猶豫了，趕緊去試試 GSAP 吧！

讓那些炫酷的動畫效果成為你項目的亮點，給你帶來更多的關注和流量。

• GSAP 官網：https://gsap.com
• GSAP Github：https://github.com/greensock/GSAP