Webサイトに魅力的なアニメーションを追加したいと思ったことはありませんか？
GSAPは、そんな願いを叶えてくれる強力なJavaScriptアニメーションライブラリです。
この記事では、GSAPの基本的な導入方法から簡単な使い方まで、初心者の方にもわかりやすく解説します。
GSAPとは？
GSAP（GreenSock Animation Platform）は、高性能なJavaScriptアニメーションライブラリです。
以下のような特徴があります。
- 高いパフォーマンス
60FPSの滑らかなアニメーションを実現 - ブラウザ互換性
古いブラウザもサポート - 豊富なAPIセット
様々なアニメーション表現が可能 - プロ仕様
多くのプロのWeb制作者が使用
GSAPの導入方法
CDNを使用する方法（最も簡単）
HTMLファイルの
タグ内に以下のコードを追加します：<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
npmを使用する方法
Node.jsプロジェクトの場合：
npm install gsap
import { gsap } from "gsap";
ダウンロードして使用する方法
GSAP公式サイトからファイルをダウンロードし、プロジェクトに組み込みます。
基本的な使い方（主要なメソッド）
gsap.to()
要素を現在の状態から指定の状態にアニメーションさせます：
gsap.to(".box", {
duration: 2, // アニメーション時間
x: 200, // X軸方向の移動
y: 100, // Y軸方向の移動
rotation: 360, // 回転
scale: 1.5 // スケール
});
gsap.from()
指定の状態から現在の状態にアニメーションさせます：
gsap.from(".box", {
duration: 2,
opacity: 0, // 透明から現在の透明度へ
y: -100 // 上から現在の位置へ
});
gsap.set()
即座に要素の状態を変更（アニメーションなし）：
gsap.set(".box", {
x: 200,
opacity: 0.5
});
よく使われるプロパティ
位置・移動
{
x: 100, // X軸移動（px）
y: 50, // Y軸移動（px）
left: "200px", // CSS leftプロパティ
top: "100px" // CSS topプロパティ
}
変形
{
rotation: 45, // 回転（度）
scale: 1.5, // スケール
scaleX: 2, // X軸方向のスケール
scaleY: 0.5 // Y軸方向のスケール
}
表示
{
opacity: 0.5, // 透明度
backgroundColor: "#ff0000", // 背景色
color: "#ffffff" // 文字色
}
その他
タイムライン機能
複数のアニメーションを順序立てて実行したい場合は、タイムラインを使用します：
// タイムラインを作成
const tl = gsap.timeline();
// アニメーションを順番に追加
tl.to(".box1", {duration: 1, x: 200})
.to(".box2", {duration: 1, y: 100})
.to(".box3", {duration: 1, rotation: 360});
イージングの活用
アニメーションをより自然にするため、イージング（加速・減速）を設定できます：
gsap.to(".box", {
duration: 2,
x: 300,
ease: "power2.out" // ゆっくり停止
});
// その他のイージング例
// "bounce.out" - バウンス効果
// "elastic.out" - 弾性効果
// "back.out" - 少し戻ってから進む
トラブルシューティング
よくある問題と解決法
- アニメーションが動かない
- JSが読み込まれているか確認
- 要素が存在するか確認
- CSSのtransformプロパティと競合していないか確認 - パフォーマンスが悪い
- will-change: transformをCSSに追加
- 多くの要素を同時にアニメーションさせすぎていないか確認 - モバイルで動作が重い
- 3Dアクセラレーションを有効にする：force3D: true
まとめ
GSAPは強力で使いやすいアニメーションライブラリです。この記事で紹介した基本的な機能だけでも、魅力的なWebアニメーションを作ることができます。
次のステップとして、以下を学習することをおすすめします：
・ScrollTriggerプラグインでスクロール連動アニメーション
・Morphing SVGアニメーション
・3Dトランスフォーム
・パフォーマンス最適化
GSAPの世界は奥深いので、ぜひ様々なアニメーションに挑戦してみてください！