スクロール連動アニメーション：GSAPを使ったライン描画と画像フェードインの実装方法

この記事では、GSAPとScrollTriggerを使って、スクロールに連動したラインアニメーションと画像のフェードイン効果を実装する方法を紹介します。初心者でも理解しやすいように、コードと解説を段階的に説明していきます。

まず、単発式のアニメーションからスタートし、その後、複数の画像に対応する方法を紹介します。

また、この記事は以前紹介した画像アニメーションと関連付けされてますので、まだの方はそちらも御覧ください。

使用するライブラリ
【単発式】画像1枚に対するラインアニメーションの実装方法
まとめ

使用するライブラリ

この記事では、GSAP（GreenSock Animation Platform）というライブラリを使用します。GSAPは、ウェブページのアニメーションを簡単に実装できる強力なツールです。

また、スクロールに連動したアニメーションを実現するために、ScrollTriggerというGSAPのプラグインも使用します。これにより、スクロール位置に応じたアニメーションが可能になります。

GSAPとは？
GSAPは、アニメーションを簡単に作成できるJavaScriptライブラリです。高速で軽量であり、ブラウザのパフォーマンスに優れているため、アニメーション処理がスムーズです。
ScrollTriggerとは？
ScrollTriggerは、スクロールに基づいてアニメーションをトリガーするためのGSAPプラグインです。スクロール位置を監視し、特定の位置に達したときにアニメーションを開始することができます。

これらを利用することで、スクロールに応じて動的なアニメーションを簡単に実装できます。

GSAPの導入方法

まず、GSAPのライブラリをプロジェクトに追加する必要があります。以下の2つのCDN（Content Delivery Network）をHTMLに追加して、ライブラリを読み込む方法を説明します。

<!-- GSAPのライブラリ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<!-- GSAPのScrollTriggerプラグイン（スクロール連動アニメーション用） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

これらのスクリプトタグをHTMLファイルの<head>内、または<body>の末尾に追加してください。これで、GSAPとそのScrollTriggerプラグインを使用する準備が整います。

【単発式】画像1枚に対するラインアニメーションの実装方法

このセクションでは、1枚の画像に対してスクロールに連動したラインアニメーションを描画し、画像がフェードインするアニメーションを実装します。

使用するコード

HTML

まず、1枚の画像を配置し、その周囲にラインを描画します。

<div class="image-wrapper line-animate">
  <img src="画像のURL" alt="Sample Image">
  <span class="line top"></span>
  <span class="line right"></span>
  <span class="line bottom"></span>
  <span class="line left"></span>
</div>

CSS

画像の周囲にラインを描画するために、CSSを使ってスタイルを整えます。

.image-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 50px auto;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.line {
  position: absolute;
  background-color: gray;
}

.top, .bottom {
  height: 2px;
  width: 0%;
}

.left, .right {
  width: 2px;
  height: 0%;
}

.top { top: 0; left: 0; }
.right { top: 0; right: 0; }
.bottom { bottom: 0; right: 0; }
.left { bottom: 0; left: 0; }

JavaScript（GSAPによるアニメーション）

スクロールに応じてラインを描画し、画像をフェードインさせるアニメーションをGSAPで設定します。

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".image-wrapper",
    start: "top 80%",
    toggleActions: "play reverse play reverse"
  }
});

tl.to(".line.top", { width: "100%", duration: 0.5 })
  .to(".line.right", { height: "100%", duration: 0.5 }, "+=0")
  .to(".line.bottom", { width: "100%", duration: 0.5 }, "+=0")
  .to(".line.left", { height: "100%", duration: 0.5 }, "+=0")
  .to("img", { opacity: 1, duration: 0.5 }, "+=0.2");

サンプル

See the Pen line-animate+gsap by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

【複数式】複数の画像に対するラインアニメーションの実装方法

次に、複数の画像に対してラインアニメーションを適用する方法を紹介します。ここでは、1つのコードで複数の画像を処理する方法を説明します。

使用するコード

HTML

複数の画像を配置し、それぞれにラインを描画します。

<div class="image-wrapper line-animate">
  <img src="画像のURL" alt="Sample Image 1">
  <span class="line top"></span>
  <span class="line right"></span>
  <span class="line bottom"></span>
  <span class="line left"></span>
</div>

<div class="image-wrapper line-animate">
  <img src="画像のURL" alt="Sample Image 2">
  <span class="line top"></span>
  <span class="line right"></span>
  <span class="line bottom"></span>
  <span class="line left"></span>
</div>

CSS

前回と同じスタイルを使いますが、複数の画像に対応するようにimage-wrapperの数が増えることを想定して設定します。

.image-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 50px auto;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.line {
  position: absolute;
  background-color: gray;
}

.top, .bottom {
  height: 2px;
  width: 0%;
}

.left, .right {
  width: 2px;
  height: 0%;
}

.top { top: 0; left: 0; }
.right { top: 0; right: 0; }
.bottom { bottom: 0; right: 0; }
.left { bottom: 0; left: 0; }

JavaScript（GSAPによるアニメーション）

複数の画像を動的に処理するために、forEachを使ってアニメーションを設定します。

gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll('.line-animate').forEach(wrapper => {
  const img = wrapper.querySelector('img');

  // ライン（top, right, bottom, left）を自動追加
  ['top', 'right', 'bottom', 'left'].forEach(pos => {
    const span = document.createElement('span');
    span.className = `line ${pos}`; // ← テンプレートリテラルでクラスを付ける
    wrapper.appendChild(span);
  });

  // 初期設定
  const top = wrapper.querySelector('.top');
  const right = wrapper.querySelector('.right');
  const bottom = wrapper.querySelector('.bottom');
  const left = wrapper.querySelector('.left');
  
  gsap.set([top, bottom], { width: '0%' });
  gsap.set([right, left], { height: '0%' });
  gsap.set(img, { opacity: 0 });

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: wrapper,
      start: 'top 80%',
      toggleActions: "play reverse play reverse"
    }
  });

  tl.to(top, { width: '100%', duration: 0.5 })
    .to(right, { height: '100%', duration: 0.5 })
    .to(bottom, { width: '100%', duration: 0.5 })
    .to(left, { height: '100%', duration: 0.5 })
    .to(img, { opacity: 1, duration: 0.5 }, '+=0.2');
});

ライン要素を自動で追加する処理の解説

複数の画像に同じアニメーションを適用したい場合、HTMLに手作業でライン用の <span> を書き足すのは面倒ですよね。

そこで、このコードでは JavaScriptを使って、必要な4つのライン要素（top, right, bottom, left）を自動的に生成しています。

// ライン（top, right, bottom, left）を自動追加
['top', 'right', 'bottom', 'left'].forEach(pos => {
  const span = document.createElement('span');
  span.className = `line ${pos}`; // ← テンプレートリテラルでクラスを付ける
  wrapper.appendChild(span);
});

`['top', 'right', 'bottom', 'left']`	4方向のライン名をまとめた配列です。
.forEach(pos => { … })	配列の各要素（方向）に対して、処理を繰り返します。
document.createElement(‘span’)	新しい `<span>` 要素を作成します。
span.className = `line ${pos}`	作成した要素に `line top` や `line right` などのクラス名を付けています。これはCSSで位置を指定するために重要です。
wrapper.appendChild(span)	対象の画像コンテナに新しいライン要素を追加します。

span.className = line ${pos}; // ← テンプレートリテラルでクラスを付ける

テンプレートリテラルとは？ JavaScriptのテンプレートリテラルは、バッククォート（`）を使用して文字列を作成し、${} の中に変数や式を埋め込むことができます。例えば、`line ${pos}` は、pos の値に応じて line top や line right などの文字列を生成します。