アニメーションの実装ができるJavaScriptライブラリのGSAPについて、使い方などをメモ。
ライセンスについて
GSAPは基本的な利用は無料ですが、利用条件によっては有料プランが必要になります。
詳細は公式サイトのPricingやLicensingのページを確認いただければと思いますが、大まかには以下のような場合に必要なようです。
- ウェブサイトやゲーム・アプリ・テーマなど、制作物の利用やアクセスに料金が必要な場合
- 例として、有料会員ページ内でGSAPを使用している場合など
- 複数のエンドユーザーに販売される製品で使用する場合
- 例として、GSAPを利用したテーマやテンプレートを販売している場合など
- 一部の有料のプラグインを使用する場合
サンプルコード
実際にGSAPの設定を試してみます。
今回はCDNを使ってGSAPの読み込みを行います。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
HTMLにアニメーションさせる要素を配置します。
<div class="box"></div>
簡単なアニメーションの設定を行ってみます。
document.addEventListener('DOMContentLoaded', () => {
gsap.to(".box", {
rotation: 27, // 角度 27度
x: 100, // x方向 100px
duration: 1 // 1秒のアニメーション
});
});
to()メソッドの場合、アニメーション終了時の値を定義する形になります。
to()メソッドのデモページ
from()メソッドの場合、アニメーション開始時の値を定義します。
document.addEventListener('DOMContentLoaded', () => {
gsap.from(".box", {
rotation: 27, // 角度 27度
x: 100, // x方向 100px
duration: 1 // 1秒のアニメーション
});
});
開始と終了の両方を値を定義したい場合、fromTo()メソッドを使用します。
document.addEventListener('DOMContentLoaded', () => {
gsap.fromTo(".box", {
rotation: 45, // 角度 45度
x: 100 // x方向 100px
}, {
rotation: 120, // 角度 120度
x: 300, // x方向 300px
duration: 1 // 1秒のアニメーション
});
});
アニメーションを繰り返したい場合、repeatを使用します。
document.addEventListener('DOMContentLoaded', () => {
gsap.to(".box", {
rotation: 27, // 角度 27度
x: 100, // x方向 100px
duration: 1, // 1秒のアニメーション
repeat: -1 // 無限ループ
});
});
アニメーションを繰り返す際に往復する形にしたい場合、合わせてyoyoを設定します。
document.addEventListener('DOMContentLoaded', () => {
gsap.to(".box", {
rotation: 27, // 角度 27度
x: 100, // x方向 100px
duration: 1, // 1秒のアニメーション
repeat: -1, // 無限ループ
yoyo: true // アニメーションの往復
});
});
上記のようなシンプルなアニメーション(Tween)の他に、複数の動きを合わせたタイムライン(Timeline)もあります。
document.addEventListener('DOMContentLoaded', () => {
let tl = gsap.timeline();
tl
.to(".box", {
x: 100, // x方向 100px
duration: 2 // 2秒のアニメーション
})
.to(".box", {
y: 200, // y方向 200px
duration: 1 // 1秒のアニメーション
})
.to(".box", {
rotation: 360, // 角度 180度
duration: 3 // 3秒のアニメーション
});
});
タイムライン内のアニメーションのタイミングを調整することもできます。
document.addEventListener('DOMContentLoaded', () => {
let tl = gsap.timeline();
tl
.to(".box", {
x: 100, // x方向 100px
duration: 2 // 2秒のアニメーション
})
.to(".box", {
y: 200, // y方向 200px
duration: 1 // 1秒のアニメーション
}, "+=2") // 開始を2秒遅らせる
.to(".box", {
rotation: 360, // 角度 180度
duration: 3 // 3秒のアニメーション
}, 2); // タイムラインの開始から2秒後に開始
});
この場合、2つ目の下に移動するアニメーションを2秒遅らせ、3つ目の回転するアニメーションを最初から2秒の時点で開始するような設定になります。
timeline()のタイミング調整のデモページ
任意のタイミングで停止や再実行、逆再生などを行うこともできます。
<div class="box"></div> <button class="pause">pause()</button> <button class="play">play()</button> <button class="restart">restart()</button> <button class="reverse">reverse()</button> <button class="seek">seek(3)</button>
document.addEventListener('DOMContentLoaded', () => {
let tl = gsap.timeline();
tl
.to(".box", {
x: 100, // x方向 100px
duration: 2 // 2秒のアニメーション
})
.to(".box", {
y: 200, // y方向 200px
duration: 1 // 1秒のアニメーション
})
.to(".box", {
rotation: 360, // 角度 180度
duration: 3 // 3秒のアニメーション
});
document.querySelector('.pause').addEventListener('click', () => {
tl.pause();
});
document.querySelector('.play').addEventListener('click', () => {
tl.play();
});
document.querySelector('.restart').addEventListener('click', () => {
tl.restart();
});
document.querySelector('.reverse').addEventListener('click', () => {
tl.reverse();
});
document.querySelector('.seek').addEventListener('click', () => {
tl.seek(3);
});
});
最後にGSAPのプラグイン(ScrollTrigger)の使用を試してみます。
CDNでの読み込みを追加します。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
ScrollTriggerの設定を追加します。
document.addEventListener('DOMContentLoaded', () => {
gsap.to(".box", {
scrollTrigger: '.box', // .boxがビューポートに入るとアニメーションを開始
rotation: 27, // 角度 27度
x: 100, // x方向 100px
duration: 1 // 1秒のアニメーション
});
});
これで対象要素(.box)がビューポートに入るとアニメーションを開始するようになりました。
ScrollTriggerのデモページ
コメントが承認されるまで時間がかかります。