【Gsap】高機能なアニメーションライブラリー
の使い方
はじめに
概要
Gsapは、CSSアニメーションの知識を応用して簡単にアニメーションを実装できるライブラリです。CSSでアニメーションを実装できるようになって、次のステップに進みたいと考えている方にはぴったりの内容です。Gsapは、複雑なアニメーションも簡単に実装できるので、ぜひマスターしてみてください。なお、CSSアニメーションについてはこちらを参照してください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
Gsapの実装
公式サイト
上記のリンクからCDNをコピーし、HTMLのheadタグに貼り付けてください。
コンソールにGsapのObjectが表示されていれば、正しくアップロードされています。
注意事項
Gsapを読み込むscriptタグはhtmlが読み込まれた後に記述する必要があります。
headタグ内で呼び出す場合は、defar属性が必要です。
必須項目
Gsapには便利な拡張機能や、その機能を発揮してくれるオプションがあります。以下は特に優先度の高い内容になりますので、まずはこちらを覚えることをおすすめします。
Gsapでできることをまとめたサイトはこちらです。
scrollTrigger
Gsapアニメーションをスクロールと紐付ける拡張機能です。通常バージョンではスクロールには紐づいていないため、こちらの知識は必須となります。
詳細はこちらを参照してください。
timeline
timelineを作成すると、アニメーションを追加したり、遅延を設定したり、逆再生したりすることができます。また、timeline上でアニメーションのタイミングや順序を簡単に調整することもできます。
詳細はこちらを参照してください。
stagger
要素のアニメーションを一定の時間差で順番に実行するための機能です。要素の配列を指定し、それぞれの要素に対して順番にアニメーションを適用することができます。
詳細はこちらを参照してください。
まとめ
- Gsapをマスターすれば、難しいアニメーションを簡単に実装できる
- CSSアニメーションの知識を活かすことができる
- 必須項目は3点あり、scrollTrigger/stagger/timeline
- 主要なブラウザで動作を保証している
- Web制作では必須の内容と考える
- コミュニティが豊富であり、適切な回答を得ることができる