BricksでGSAPを使う方法は、GSAPに対応したmotion.pageやBricks Forge、Next Bricksなどのプラグインを使う方法と、コードを直接書き込む方法がある。
今回は、直接書き込む方法を取り上げる。
CDNの設定 #
GSAPを使うには、サイト全体か、使いたいページでCDNを読み込むことが必要。
CDNとはContent Delivery Network（コンテンツ配信ネットワーク）の略で、世界中のサーバーにホストされたライブラリファイル（たとえばGSAP、jQuery、Font Awesomeなど）を、Webサイトに読み込んで使うための方法。
GSAPのCDN #
これをHTMLに入れるだけで、自分でGSAPファイルをダウンロードしなくても使えるようになる。
2行目はスクロールトリガーを使う場合にのみ必要
Bricksで設定する場所 #
サイト全体に設定する場合 #
- WordPress管理画面にログイン
- 左メニュー →「Bricks」→「設定」
- 上部タブ「カスタムコード」をクリック
- 「Footer」欄に上記スクリプトを貼り付け
各ページごとに設定する場合 #
- Bricksで対象ページを開く（「Bricksで編集」）
- 右上の「⚙ 設定」アイコンをクリック
- 左メニューから「カスタムコード」を選択
- 「Footer」欄に上記スクリプトを貼り付け
サイトの設計にもよるが各ページを推奨。
