GSAPはJavaScriptのアニメーションライブラリです。GSAPは制御が容易で、高度なアニメーションを実現できる点が特徴です。本記事では、このGSAPの基本からアニメーションの組み立て方までを解説します。
GSAPとは
GSAPはGreenSock Animation Platformの略で、JavaScriptのアニメーションライブラリです。
以下のような特徴があります：
- フレームワーク非依存: Vue.js、React、jQueryなど、様々なフレームワークと併用可能。
- 多様な要素に対応: CSS、SVG、Canvas、React、Vue、WebGL、色、テキスト、モーションパス、オブジェクトなど。
- 多彩なイベント: スクロールベースのアニメーションも簡単に実装可能。
- レスポンシブ対応:
gsap.matchMedia()で画面幅ごとにアニメーションを制御可能。 - 高パフォーマンス: jQueryによるアニメーションより20倍高速（GSAP公式情報）。
- プラグインによる拡張: ScrollTrigger、Flip、Draggable、MorphSVGなど、多様なプラグインが利用可能。
GSAPの基本的な使い方
インストール方法
CDNを使用する場合：
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
npmを使用する場合：
npm install gsap
基本的なアニメーション
以下は、.box要素を1秒かけて360度回転させ、x座標を100px移動させる基本的なアニメーションです。
gsap.to(".box", {rotation: 360, x: 100, duration: 1});
この簡単な例を実装したHTMLファイルは以下のようになります：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Simple Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
gsap.to(".box", {rotation: 360, x: 100, duration: 1});
</script>
</body>
</html>
このコードを実行すると、青い四角形が右に移動しながら1回転します。
タイムラインの利用
複数のアニメーションを連続して、あるいは同時に実行したい場合は、タイムラインを使用します。
const tl = gsap.timeline();
tl.to(".box1", { duration: 2, x: 100 })
.to(".box2", { duration: 1, y: 200 })
.to(".box3", { duration: 3, rotation: 360 });
タイムラインを使用すると、アニメーションの順序や開始時間を細かく制御できます：
tl.to(".box1", { duration: 2, x: 100 })
.to(".box2", { duration: 1, y: 200 }, "-=1") // 前のアニメーションが完了する1秒前に開始
.to(".box3", { duration: 3, rotation: 360 }, 2); // 前のアニメーションが完了して、2秒後に開始
以下は、タイムラインを使用したHTMLの例です：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Timeline Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
position: absolute;
left: 20px;
}
.box1 { background-color: #3498db; top: 20px; }
.box2 { background-color: #e74c3c; top: 80px; }
.box3 { background-color: #2ecc71; top: 140px; }
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<script>
const tl = gsap.timeline();
tl.to(".box1", { duration: 2, x: 100 })
.to(".box2", { duration: 1, y: 200 }, "-=1")
.to(".box3", { duration: 3, rotation: 360 }, 2);
</script>
</body>
</html>
スクロールトリガー
スクロールに応じてアニメーションを開始したい場合は、ScrollTriggerプラグインを使用します。
gsap.to(".box", {
scrollTrigger: ".box", // .boxが画面内に入るとアニメーションが開始
x: 500
});
以下は、スクロールトリガーを使用したHTMLの例です：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Scroll Trigger Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
height: 200vh;
}
.spacer {
height: 100vh;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="spacer"></div>
<div class="box"></div>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: ".box",
x: 500,
duration: 2,
rotation: 360
});
</script>
</body>
</html>
この例では、ページをスクロールして青い四角形が画面に入ると、右に移動しながら回転するアニメーションが開始されます。
より実践的な使い方
GSAPのサイトには、他にも数多くのデモがあります。これらを参考にすれば、より実践的な使い方を学ぶことができます。
以下は、スケートボートをマウスでドラッグできるようにするデモです。
const root = document.documentElement;
const btnWildMode = document.getElementById("wild-mode");
function resetPropertyValues() {
root.style.setProperty("--x", 0);
root.style.setProperty("--y", 0);
}
Observer.create({
preventDefault: true,
onChangeX({ isDragging, deltaX }) {
if (!isDragging) return;
const x = root.style.getPropertyValue("--x");
root.style.setProperty("--x", parseInt(x) - deltaX);
},
onChangeY({ isDragging, deltaY }) {
if (!isDragging) return;
const y = root.style.getPropertyValue("--y");
root.style.setProperty("--y", parseInt(y) + deltaY);
}
});
btnWildMode.addEventListener("click", () => resetPropertyValues());
resetPropertyValues();
CSSkateboard [w/ GSAP Observer]
まとめ
GSAPを使用することで、複雑なアニメーションを少ないコードで実装できます。基本的なアニメーション、タイムライン、スクロールトリガーなどの機能を組み合わせることで、魅力的でインタラクティブなWebサイトやアプリケーションを作成することができます。
GSAPの詳細な情報やさらなる使用例については、公式サイトを参照してください。MonacaアプリやWebサイトにGSAPを導入して、ユーザー体験を向上させましょう。