GSAP

GSAP（Greensock動畫平台）

GSAP是一個框架 - 不合時宜的JavaScript動畫庫，它將開發人員變成動畫超級英雄。構建在每個主要瀏覽器中起作用的高性能動畫。動畫CSS，SVG，帆布，React，Vue，WebGL，顏色，字符串，運動路徑，通用對象... JavaScript都可以觸摸任何東西！ GSAP的Scrolltrigger插件以最小的代碼提供了基於滾動捲軸的動畫。 gsap.matchmedia（）使建築物響應式，易於訪問的動畫變得輕而易舉。

沒有其他圖書館可以提供高級測序，可靠性和嚴格的控制，同時解決超過1200萬個站點的現實問題。 GSAP圍繞無數瀏覽器的不一致而進行。您的動畫正常工作。 GSAP的核心是高速屬性操縱器，隨著時間的推移更新值以極高的準確性更新。它比JQuery快20倍！

GSAP是完全靈活的；在任何想要的地方撒上它。零依賴性。

有許多可選的插件和輕鬆功能可輕鬆實現高級效果，例如滾動，變形，沿運動路徑或翻轉動畫進行動畫。甚至還有一個方便的觀察者，可以在瀏覽器/設備之間進行正常化的事件檢測。

開始

文檔和安裝

在此處查看完整的文檔，包括安裝指南。

CDN

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >

有關核心文件/插件的快速鏈接，請參見JSDELIVR的專用GSAP頁面。在GSAP.com上有更多的安裝說明。

每個主要的廣告網絡都不包括GSAP從文件尺寸計算中，大多數都在其自己的CDN上都有它，因此請與它們聯繫以獲取適當的URL。

NPM

請參閱此處通過NPM使用GSAP的指南。

 npm install gsap

GSAP的Core幾乎可以動畫所有內容，包括CSS和屬性，此外，它包括所有實用程序方法，例如Interpaly（），MapRange（），大多數輕鬆，並且可以進行折斷和修飾。

 // typical import
import gsap from "gsap" ;

// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger" ;
import Flip from "gsap/Flip" ;
import Draggable from "gsap/Draggable" ;

// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap , ScrollTrigger , Draggable , MotionPathPlugin } from "gsap/all" ;

// don't forget to register plugins
gsap . registerPlugin ( ScrollTrigger , Draggable , Flip , MotionPathPlugin ) ; 

NPM文件是ES模塊，但是還有一個帶有UMD文件的A / DIST / DIRECTORY，以供額外的兼容性。

從您的gsap.com帳戶下載俱樂部GSAP會員插件，然後將它們包含在您自己的JS有效載荷中。您甚至還有一個tarball文件，您可以使用NPM/紗線安裝。 GSAP也為會員提供了私人NPM註冊表。在我們的論壇上發布問題，我們很樂意為您提供幫助。

scrolltrigger＆scrollsmoother

如果您正在尋找滾動驅動的動畫，則GSAP的Scrolltrigger插件是新標準。還有一個伴侶捲軸。

使用反應？

有一個 @gsap / react軟件包，它可以公開useGSAP()掛鉤，該掛鉤是useEffect() / useLayoutEffect()的置換式替換，自動化清理任務。請閱讀React指南以獲取詳細信息。

資源

• gsap.com
• 入門指南
• 文件
• 演示和入門模板
• 社區論壇
• 輕鬆可視化器
• 展示櫃
• YouTube頻道
• 備忘單
• 免費嘗試獎金插件
• 俱樂部GSAP（獲取不在此存儲庫中的不受限制的獎金插件）

什麼是GSAP俱樂部？

任何人都參加GSAP的主要原因有3個主要原因：

• 要訪問MorphSVG，Splittext，ScrollsMoother等的唯一時尚插件。
• 獲得特殊商業許可證。
• 支持正在進行的發展努力並為我們加油。

了解更多。

免費嘗試所有獎勵插件！

https://gsap.com/trial

需要幫助嗎？

在友好的GSAP論壇中詢問。或分享您的知識並幫助他人 - 這是提高您技能的好方法！也會報告任何錯誤（如果願意，請在此處提出問題）。

執照

可以在https://gsap.com/standard-license上查看Greensock的標準“無費用”許可證。俱樂部GSAP成員獲得了其他權利。有關詳細信息，請參見https://gsap.com/licensing/。 GSAP為什麼不使用MIT（或類似）開源許可證，為什麼這是一件好事？本文解釋了這一切：https：//gsap.com/why-license/

版權（C）2008-2023，Greensock。版權所有。