GSAP練習問題集｜Webデザインのためのアニメーション練習ガイド

概要

GSAPは、Webアニメーションを簡単かつ効率的に作成できる強力なライブラリです。本記事では、GSAPの基本的な使い方から応用まで学べる練習問題を紹介します。

練習問題を進めるポイント

• 小さなタスクに分ける: 各アニメーションを細かく確認しながら実装。
• 公式ドキュメントを活用: GSAP公式サイトには詳しい解説があります。

目次

• GSAPの基本
• 基本的な使い方
• 練習問題（初級編）
• ボックスの移動アニメーション
• 練習問題（中級編）
• スクロールアニメーション
• 練習問題（上級編）
• タイムラインを使った複数要素のアニメーション
• スクロールトリガーを使ったインタラクティブアニメーション
• 練習問題の解答

練習問題

問題 1. 初級：ボックスを右に動かす

問題内容:
画面上にあるボックスを右に100px移動させるアニメーションを作成してください。アニメーションは1秒で完了するようにしてください。

問題2: 中級：スクロールアニメーション

問題内容:
スクロールに応じて、文字がフェードインするアニメーションを作成してください。

ヒント:

スクロールが発火条件

ScrollTriggerプラグインを使用

上級：タイムラインとスクロールトリガーを活用した練習問題

問題3. 上級：複数要素を連続でアニメーションさせる（タイムライン）

問題内容:
以下の手順で複数のボックスを連続してアニメーションさせてください。

1. 最初のボックスは左から右へスライド（1秒）。
2. 次のボックスは上から下へスライド（1.5秒）。
3. 最後のボックスは拡大して透明度を上げる（2秒）。

ヒント:

各アニメーションの開始タイミングをシーケンスで設定。

gsap.timeline() を使います。

問題4: 上級：スクロールトリガーを使った複雑なアニメーション

問題内容:
スクロールすると以下のようなアニメーションを作成してください：

1. 背景が徐々に色を変える。
2. 特定の要素が画面中央に来るとスケールアップして回転する。
3. ページ最下部に到達すると要素がフェードアウトする。

ヒント:

onUpdate で背景色の変化を制御。

ScrollTriggerプラグインを使います。

解答例

<div class="box"></div>
<script>
  gsap.to(".box", { x: 100, duration: 1 });
</script>

<div class="text">Hello GSAP</div>
<script>
  gsap.registerPlugin(ScrollTrigger);
  gsap.from(".text", {
    opacity: 0,
    y: 50,
    duration: 1,
    scrollTrigger: {
      trigger: ".text",
      start: "top 80%",
    },
  });
</script>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

<script>
  const tl = gsap.timeline();

  tl.to(".box1", { x: 300, duration: 1 })
    .to(".box2", { y: 200, duration: 1.5 })
    .to(".box3", { scale: 1.5, opacity: 1, duration: 2 });
</script>

<div class="bg"></div>
<div class="content"></div>

<script>
  gsap.registerPlugin(ScrollTrigger);

  // 背景色の変化
  gsap.to(".bg", {
    backgroundColor: "blue",
    scrollTrigger: {
      trigger: ".bg",
      start: "top top",
      end: "bottom bottom",
      scrub: true,
    },
  });

  // 中央に来た要素のスケールアップと回転
  gsap.to(".content", {
    scale: 2,
    rotation: 360,
    scrollTrigger: {
      trigger: ".content",
      start: "center center",
      end: "bottom top",
      scrub: true,
    },
  });

  // フェードアウト
  gsap.to(".content", {
    opacity: 0,
    scrollTrigger: {
      trigger: ".content",
      start: "bottom top",
      scrub: true,
    },
  });
</script>

まとめ：GSAPで魅力的なアニメーションを作ろう

GSAPは、Webデザインにおいてアニメーションを実現するための強力なツールです。この記事で紹介した練習問題を通じて、基本的なアニメーションから高度なタイムラインやスクロールトリガーを使ったテクニックまで幅広く学べたはずです。

以下のポイントを振り返りましょう：

1. 基本アニメーションの理解
   ボックスの移動やフェードイン・アウトなど、アニメーションの基本操作をマスターすることで、GSAPの基礎が身につきました。
2. 応用的なテクニック
   タイムラインを利用した複数要素のアニメーションや、スクロールトリガーによるインタラクティブな演出の作り方を学びました。
3. 実践への応用
   GSAPの柔軟性を活かして、実際のプロジェクトで効果的にアニメーションを組み込む準備が整いました。

アニメーションはWebサイトの魅力を引き出し、ユーザー体験を向上させる重要な要素です。GSAPの公式ドキュメントやコミュニティを活用してさらに深く学び、独自のアイデアを形にしていきましょう。

この記事が、あなたのWebデザインスキル向上に役立てば幸いです。次回はさらに高度なGSAPテクニックや実践例を取り上げていく予定です。ぜひ挑戦を続けてください！