GSAPは、開発者をアニメーションスーパーヒーローに変えるフレームワークに依存しないJavaScriptアニメーションライブラリです。すべての主要なブラウザで機能する高性能アニメーションを構築します。 CSS、SVG、キャンバス、React、Vue、WebGL、色、文字列、モーションパス、一般的なオブジェクト... JavaScriptが触れることができるもの! GSAPのScrolltriggerプラグインは、コードを最小限に抑えたジョードロップスクロールベースのアニメーションを提供します。 gsap.matchmedia()は、建物の応答性のある、アクセシビリティに優しいアニメーションを簡単にします。
他のライブラリは、そのような高度なシーケンス、信頼性、および厳密な制御を提供しながら、1,200万を超えるサイトで実際の問題を解決することはありません。 GSAPは、数え切れないほどのブラウザの矛盾を中心に動作します。あなたのアニメーションはただ機能します。 GSAPは、その中心であるため、高速プロパティマニピュレーターであり、時間の経過とともに値を極端に正確に更新します。 JQueryよりも最大20倍高速です!
GSAPは完全に柔軟です。好きなところならどこでも振りかけます。ゼロ依存関係。
スクロール、モーフィング、モーションパスに沿ったアニメーション、フリップアニメーションなど、簡単に高度な効果を実現するための多くのオプションのプラグインと緩和機能があります。ブラウザ/デバイス全体でイベント検出を正規化するための便利なオブザーバーもあります。
インストールガイドを含む完全なドキュメントをこちらをご覧ください。
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >
コアファイル/プラグインへのクイックCDNリンクについては、JSDELIVRの専用GSAPページを参照してください。 gsap.comには、より多くのインストール手順があります。
すべての主要な広告ネットワークは、ファイルサイズの計算からGSAPを除外し、ほとんどが独自のCDNにそれを持っているので、適切なURLについて連絡してください。
NPM経由でGSAPを使用するガイドをこちらをご覧ください。
npm install gsap
GSAPのコアは、CSSや属性を含むほとんどすべてのものをアニメーション化できます。さらに、Interporate()、MapRange()、ほとんどのEASESなどのすべてのユーティリティ方法が含まれ、スナップおよび修飾子を行うことができます。
// 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 /ディレクトリもあります。
GSAP.comアカウントからClub GSAPメンバーのみのプラグインをダウンロードしてから、独自のJSペイロードに含めます。 NPM/YARNでインストールできるTarballファイルもあります。 GSAPには、メンバー向けのプライベートNPMレジストリもあります。フォーラムに質問を投稿してください。喜んでお手伝いします。
スクロール駆動型のアニメーションを探している場合、GSAPのScrolltriggerプラグインは新しい標準です。コンパニオンスクロールスモーもあります。
useGSAP()
フックを公開する @gsap / reactパッケージがあります。これは、 useEffect()
/ useLayoutEffect()
のドロップイン交換であり、クリーンアップタスクを自動化します。詳細については、React Guideをお読みください。
誰もがクラブGSAPにサインアップする3つの主な理由があります。
もっと詳しく知る。
https://gsap.com/trial
フレンドリーなGSAPフォーラムで尋ねてください。または、あなたの知識を共有し、他の誰かを助ける - それはあなたのスキルを磨くための素晴らしい方法です!そこにあるバグも報告します(または、必要に応じてここに問題を提出してください)。
Greensockの標準「請求なし」ライセンスは、https://gsap.com/standard-licenseで表示できます。クラブGSAPメンバーには追加の権利が付与されます。詳細については、https://gsap.com/licensing/を参照してください。 GSAPはなぜMIT(または類似の)オープンソースライセンスを使用しないのですか?それが良いことなのはなぜですか?この記事では、すべてについて説明します:https://gsap.com/why-license/
Copyright(c)2008-2023、Greensock。無断転載を禁じます。