Re:ProS(レプロス)メディア プログラミングに関する総合サイト

愛知県豊川市御津町で運営するプログラミング教室「Re:ProS」が提供するプログラミング総合情報メディア

CSSアニメーションが複雑なら「GSAP」がおすすめ！できることやメリットを解説

公開日: Yokoyama Nana
Webデザイン プログラミング

CSSアニメーションは、フェードインやホバーエフェクトなどのシンプルな演出であれば手軽に実装できます。

しかし、

  • たくさんの要素を順番に表示したい
  • スクロールに合わせてアニメーションを実行したい
  • イージングやタイミングを細かく調整したい

このような場面では、animation-delayやsetTimeout()、IntersectionObserverなどを組み合わせる必要があり、実装が複雑になりがちです。

そんなときに役立つのが、JavaScriptアニメーションライブラリのGSAP（GreenSock Animation Platform）です。

GSAPを利用すると、凝ったアニメーションの実現や複数のアニメーション管理など、一つのライブラリで実現できます。

この記事では、GSAPでできること、利用のメリットを中心に解説していきます。

GSAPとは？

GSAP（GreenSock Animation Platform）は、Webサイト上の要素をなめらかに動かすためのJavaScriptライブラリです。

公式サイト：https://gsap.com/

GSAPのサイトスクショ

出典元：公式サイト

GSAPの特徴

GSAPを利用すると、より自由度の高い表現が可能になります。

また、複雑になりがちなアニメーションを管理しやすいことが大きな魅力です。

シンプルなコードで実装できる

GSAPの基本となるのがgsap.to()です。

例えば、要素を右へ移動しながらフェードアウトさせる場合も、数行で記述できます。

gsap.to(".box", {
  x: 200,
  opacity: 0,
  duration: 1
});

「どの要素を」「どのように動かすか」が分かりやすく、初めてでも読みやすいコードになっています。

アニメーションの流れをTimelineで管理できる

アニメーションが増えるほど、コードが複雑化していきます。

しかし、Timelineというプロパティを使えば、アニメーションの順番や開始タイミングを自動で管理してくれます。

そのため、後から演出を追加・修正する場合も対応しやすくなります。

例えば、ページを開いたときに下記の流れで演出するコードを比較してみます。

  1. ロゴが表示される
  2. 見出しが下から現れる
  3. 説明文がフェードインする
  4. ボタンが少し遅れて表示される

GSAPの場合

const tl = gsap.timeline();

tl.from(".logo", {
  opacity: 0,
  duration: 0.5
})
.from(".title", {
  y: 30,
  opacity: 0,
  duration: 0.8
})
.from(".text", {
  opacity: 0,
  duration: 0.6
})
.from(".button", {
  scale: 0.8,
  opacity: 0,
  duration: 0.5
});

コードを見るだけで、ロゴ → タイトル → テキスト → ボタンの順番でアニメーションが実行されることが分かります。

CSSだけで実装する場合

同じような演出をCSSだけで実装する場合は、それぞれの要素にアニメーションを定義し、開始タイミングをanimation-delayで調整する必要があります。

.logo {
  animation: fadeIn 0.5s forwards;
}

.title {
  animation: fadeUp 0.8s forwards;
  animation-delay: 0.5s;
}

.text {
  animation: fadeIn 0.6s forwards;
  animation-delay: 1.3s;
}

.button {
  animation: scaleIn 0.5s forwards;
  animation-delay: 1.9s;
}

要素が増えるほど、animation-delayの値を計算・管理する必要があり、アニメーションの順番を変更したい場合はすべて見直さなければならないこともあります。

JavaScript（ライブラリなし）で実装する場合

JavaScriptで順番に実行する場合でも、setTimeout()を使ってタイミングを管理することになります。

setTimeout(() => {
  logo.classList.add("show");
}, 0);

setTimeout(() => {
  title.classList.add("show");
}, 500);

setTimeout(() => {
  text.classList.add("show");
}, 1300);

setTimeout(() => {
  button.classList.add("show");
}, 1900);

こちらも開始時間を変更するたびに、後続のsetTimeout()も調整する必要があります。

移動・回転・拡大などを個別の値として指定できる

CSSではtransformを組み合わせる必要がありますが、GSAPなら動かしたいプロパティを並べるだけです。

GSAPの場合

gsap.to(".card", {
  x: 100,
  y: -20,
  rotation: 10,
  scale: 1.1,
  opacity: 0.8
});

CSSの場合

.card {
  transform:
    translateX(100px)
    translateY(-20px)
    rotate(10deg)
    scale(1.1);
  opacity: .8;
}

transformを意識せず、それぞれのプロパティを個別に指定できます。
後から移動量や回転角度を変更する場合も修正しやすいのが特徴です。

スクロール演出を実装しやすい

Webサイトでは、スクロールに合わせて要素を表示したり、セクションを固定したりする演出がよく利用されています。

GSAPでは、ScrollTriggerを利用することで、こうしたスクロール演出をシンプルなコードで実装できます。

GSAPの場合

gsap.from(".card", {
  y: 50,
  opacity: 0,
  duration: 1,
  scrollTrigger: {
    trigger: ".card",
    start: "top 80%"
  }
});

このコードでは、.cardが画面の上から80%の位置に来たタイミングで、下からフェードインします。

JavaScript（ライブラリなし）で実装する場合

同様の動きを実装するには、IntersectionObserverなどを利用して要素が画面内に入ったことを判定する必要があります。

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show");
      }
    });
  },
  {
    rootMargin: "0px 0px -20% 0px"
  }
);

document.querySelectorAll(".card").forEach((card) => {
  observer.observe(card);
});

さらに、CSS側でもアニメーションを定義する必要があります。

.card {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s;
}

.card.show {
  opacity: 1;
  transform: translateY(0);
}

スクロール位置の調整・固定表示・パララックスなどの演出を追加する場合は、さらに実装が複雑になります。

ScrollTriggerを利用すると、すべての機能を一つのライブラリで実現できるのです。

豊富なイージングを簡単に利用できる

GSAPでは、easeプロパティを指定するだけで、自然な動きを簡単に実装できます。

GSAPの場合

gsap.to(".box", {
  x: 200,
  duration: 1,
  ease: "back.out(1.7)"
});

ほかにも、

// ゆっくり減速しながら止まる
ease: "power2.out"

// より勢いよく動き、最後になめらかに止まる
ease: "power4.out"

 // ボールが跳ねるような動き
ease: "bounce.out"

// ゴムのように伸び縮みしながら止まる
ease: "elastic.out"

など、用途に応じた豊富なイージングが用意されています。

公式ドキュメント： Easing | GSAP | Docs & Learning

CSSの場合

.box {
  transition: all 1s cubic-bezier(.17,.67,.83,.67);
}

CSSでもcubic-bezier()を利用できますが、値を調整しながら理想の動きを作る必要があります。

GSAPではデザインに合わせて動きを変更しやすく、Webサイト全体で統一感のある、自然なアニメーションを作成できます。

アニメーションの再生を簡単に制御できる

ボタンを押したときに停止したり、逆再生したりする処理もシンプルに書けます。

GSAPの場合

const tl = gsap.timeline();

// 一時停止する
tl.pause();

// 停止した位置から再生する
tl.play();

// 現在位置から逆方向へ再生する
tl.reverse();

// 最初から再生し直す
tl.restart();

JavaScript（ライブラリなし）で実装する場合

CSSクラスの付け替えやanimation-play-stateの切り替えなど、状態管理が必要になります。

GSAPだとアニメーションそのものをオブジェクトとして扱えるため、簡単に制御できます。

SVGアニメーションとの相性が良い

SVGロゴやイラストも柔軟にアニメーションできます。

GSAPの場合

gsap.from("#logo", {
  scale: 0,
  opacity: 0,
  duration: 1
});

さらにMotionPathプラグインを利用すると、オブジェクトを曲線に沿って動かすこともできます。

CSSの場合

SVGの複雑なアニメーションは、CSSだけでは実装や管理が難しくなることがあります。

GSAPを使うと、デザイン性の高いアニメーションも比較的シンプルに実装できます。

まとめ

GSAPは、Webサイトにリッチでなめらかなアニメーションを加えられるJavaScriptライブラリです。

単純なフェードインやスライドだけでなく、幅広い表現に対応できます。

特に、見た目の印象や体験が重要なサイトでは、GSAPのメリットを感じやすいと思います。
ぜひ利用してみてください。

GSAPを活用したWebサイト制作もお任せください

  • GSAPを使ってWebサイトにアニメーションを取り入れたい
  • こんな動きを付けたいけれど実装方法が分からない
  • デザインはあるけれど実装が難しい
  • スクロールアニメーションやTimelineを使った演出を実現したい

このようなお悩みがありましたら、お気軽にご相談ください。

株式会社レクトでは、GSAPを活用したWebアニメーションの実装をはじめ、Webサイトのデザイン制作からコーディングまで幅広く対応しています。

Web開発のご相談はこちら

投稿者について

Yokoyama Nana

名古屋学芸大学 メディア造形学部 デザイン学科を卒業後、名古屋のIT企業にて6年間、Webデザイナーとして勤務。現在もWebデザイン業務に従事しています。機能的なデザインを作ること・デザインとコードをつなぐことが得意です！

この投稿者の記事を読む

関連投稿