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-wrapperはposition: stickyを使ってビューポート中央に固定されるようにし、.cardはposition: 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制作やポートフォリオに取り入れてみてください。