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

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

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

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

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

GSAP 團(tuán)隊現(xiàn)狀

GSAP 現(xiàn)在完全免費(fèi)了，那是不是意味著團(tuán)隊就不維護(hù)了呢？

完全不用擔(dān)心！GSAP 的核心團(tuán)隊 —— Jack、Cassie 和 Rodrigo，還會繼續(xù)維護(hù)和更新 GSAP。

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

現(xiàn)在想用 GSAP 全套工具，那太容易了。

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

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

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

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

GSAP 案例展示

SplitText 插件升級

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

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

新增功能詳解：

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

動畫到 CSS 變量的值

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

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

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

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

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

Webflow 集成簡化，輕松上手

對于用 Webflow 做網(wǎng)站的人來說，現(xiàn)在集成 GSAP 更容易了。

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

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

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

• GSAP 官網(wǎng)：https://gsap.com
• GSAP Github：https://github.com/greensock/GSAP