はじめに

「Webサイトにちょっとした動きをつけたいけど、どうやって作ればいいかわからない...」
そんな方におすすめなのが、JavaScriptアニメーションライブラリ「GSAP（GreenSock Animation Platform）」です。

GSAPは、アニメーションをとてもシンプルなコードで作れる便利なツール。
CSSアニメーションでは表現しにくい複雑な動きや、滑らかで高性能なアニメーションが得意です。

この記事では、初心者の方でも簡単にできるGSAPの基本的な使い方と、実際に動くサンプルを紹介していきます。 まずはコピペでOKなので、ぜひ試してみてください！

GSAPの基本的な使い方

まずはGSAPを使うための準備から見ていきましょう。

■ GSAPを読み込む

今回は、もっとも手軽なCDNでの読み込み方法を紹介します。
HTMLファイルのタグやタグの最後に、以下のスクリプトタグを追加するだけでOKです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

これでGSAPが使えるようになります！

■ 基本のアニメーションコード

GSAPで一番シンプルなアニメーションの書き方は、次のようになります。

gsap.to(ターゲット, { プロパティ });

例えば、クラス名「box」の要素を横に100px移動させる場合は以下のように書きます。

gsap.to(".box", { x: 100, duration: 1 });

ここで使っているプロパティ

• x: 横方向の移動距離（px単位）
• duration: アニメーションの時間（秒）

たったこれだけでアニメーションが完成します！

実際にやってみよう

では、HTMLとCSSを用意して、実際に動かしてみましょう。

■ HTML

<div class="box"></div>

■ CSS

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 100px auto;
}

■ JavaScript

gsap.to(".box", { 
  x: 200, 
  opacity: 0.5, 
  scale: 1.2, 
  duration: 2, 
  ease: "power2.out" 
});

実行結果イメージ

• 青いボックスが右に200px移動
• 半透明（opacity 0.5）になる
• 1.2倍に拡大
• 2秒かけて滑らかに動く

これで、ふわっと気持ちよく動くアニメーションの完成です！

よく使うプロパティ

GSAPにはたくさんのプロパティがありますが、初心者がよく使うものをまとめておきます。

■ おすすめイージング

• "power1.out"（ややゆっくり終わる）
• "power2.inOut"（最初と最後がゆっくり）
• "bounce.out"（バウンドするような動き）

イージングを変えるだけで、同じ動きでも雰囲気がガラッと変わります。

まとめ

GSAPは、少しのコードで思い通りのアニメーションが作れる便利なライブラリです。
CSSアニメーションよりも柔軟に動きをコントロールできるので、特に実案件でも大活躍します。

まずはこの記事のサンプルをコピペして、動かしてみるところから始めてみてください。
慣れてきたら、次は「ScrollTrigger」でスクロール連動アニメーションや、タイムラインを使った複雑な動きにも挑戦してみるのもおすすめです！