流行りに乗ります。GSAPの呼吸 壱ノ型 Ren-e(連絵)


Rene(連絵)|画像とテキストが連なって重なるGSAPアニメーション演出

はじめに

Webページをスクロールすると、前の要素に次の要素が重なり、奥に沈んでいくように切り替わるアニメーション。それを画像とテキストのペアで実現したのが、今回ご紹介するRen-e(連絵)です。

GSAPとScrollTriggerを活用し、スクロール操作と連動するインタラクティブな演出をシンプルな構造で実装しています。視覚的な流れが美しく、ポートフォリオや商品紹介、コンセプトストーリーなど、表現性が求められる場面で活用できます。


アニメーションの構成

1枚のカードは「画像」と「テキスト」の2カラム構成。これを複数枚、同一座標上に重ねて配置しています。
スクロールに連動して次のカードが下からスライドし、前のカードに完全に重なったあと、前のカードが奥にフェードアウトするようにアニメーションします。

前後の流れは以下のようになります:

[カード1] → 中央に固定 → [カード2]が重なる → [カード1]が奥へ消える
↓
[カード2] → 中央に固定 → [カード3]が重なる → [カード2]が奥へ消える
↓
...

このように、カード同士が重なりながら切り替わる演出が連続して展開され、まるで一枚絵をつないで見せているような印象になります。


実装のポイント

1. HTML構造はシンプルな.cardの繰り返し

<div class="card-wrapper">
  <div class="card">
    <img src="..." class="image" />
    <div class="text">
      <h2>タイトル</h2>
      <p>説明テキスト</p>
    </div>
  </div>
  <!-- 複数枚 -->
</div>

.card内の画像とテキストを左右に並べ、左右の表示順を交互に変えることで視線誘導にリズムを加えています。

2. stickyとabsoluteを併用し、切り替えに奥行きを

.card-wrapperposition: stickyを使ってビューポート中央に固定されるようにし、.cardposition: absoluteで同一座標に重ねています。

これにより、スクロール時に「見た目はそのままだけど内容が入れ替わる」ような滑らかな切り替えが実現できます。

3. GSAPのScrollTriggerで2段階アニメーション制御

  • 前のカードに重なる:yPercent: 0
  • 前のカードを沈ませる:scale, y, opacity, z
tl.to(next, {
  yPercent: 0,
  duration: 1
});

tl.to(current, {
  y: -100,
  opacity: 0.5,
  scale: 0.85,
  duration: 0.4
}, 1.5);

tl.to(current, {
  y: 200,
  z: -500,
  opacity: 0,
  duration: 0.8
}, 1.9);

完全に重なった後に奥へ沈む動きがこのタイミング調整で作られています。


CodePenデモ

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

活用のアイデアと応用

  • 画像とテキストをストーリー形式で見せたいときに最適
  • コンセプト紹介やヒストリー表示に活用できる
  • テキストエリアにアイコンやCTAボタンを追加することで、実用性も向上
  • アニメーションのタイミングやscale値を変えるだけで、印象をガラッと変えられる

おわりに

この「Rene(連絵)」は、視覚的な美しさとユーザーの体験をつなぐ演出として非常に汎用性の高いアニメーションです。
ScrollTrigger × stickyの発想を応用することで、さまざまな演出に発展させられます。

ぜひ、自身のWeb制作やポートフォリオに取り入れてみてください。

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。