GSAPとsplide.jsで作るスクロールアニメーション｜クロスグライドアニメーションで作る演出

カテゴリー: UI/UXモーションデザイン タグ: , , , , , ,

クロスグライドアニメーションとは？

スクロールアニメーションは、ページを移動する際に要素がフェードインしたりスライドしたりすることで、ユーザーの目を引く演出を行います。
今回紹介するクロスグライドアニメーションは、その応用版。上下2段のカルーセルを自動スクロールさせ、一定のタイミングで交差するように画像を入れ替えることで、ダイナミックかつ印象的な動きを作り出します。

「クロス（交差）＋グライド（滑るように移動）」という特徴的な動作から名付けた、独自のスクロールアニメーションです。

実装に使うライブラリ

このアニメーションは次のライブラリを組み合わせて実装します。

  • Splide.js
    軽量で柔軟なカルーセルライブラリ。上下2段の横スクロールを簡単に構築できます。
  • GSAP
    高機能なJavaScriptアニメーションライブラリ。入れ替え時のスムーズなトランジションを担当します。

この2つを組み合わせることで、シンプルなコードでも高度な演出を作れるのがポイントです。

仕組みの概要

クロスグライドアニメーションの仕組みは以下のとおりです。

  1. 上下にカルーセルを配置し、自動スクロールさせる
    • 上段：右方向へ
    • 下段：左方向へ
  2. 3秒ごとに入れ替え処理を実行
    • 画面右側の 75% 付近にある画像を上下それぞれで取得
    • 2つの画像をクローンしてアニメーションで入れ替える
  3. 最後に src を入れ替え、実際の要素を更新

このシンプルなルールによって、見ていて心地よい“交差する動き”を表現できます。や商品一覧、ギャラリーなどに組み込むことで、視覚的に“交差する”ダイナミックなUIを実現できます。

🔄実装コードの解説

Splide.js の初期化

上下2段のカルーセルを設定します。上段は右へ、下段は左へ自動スクロールさせます。

const splideTop = new Splide('.splide1', {
  type: 'loop',
  autoWidth: true,
  gap: 0,
  drag: false,
  arrows: false,
  pagination: false,
  autoScroll: { speed: 1.2, pauseOnHover: false, pauseOnFocus: false },
});
const splideBottom = new Splide('.splide2', {
  type: 'loop',
  autoWidth: true,
  gap: 0,
  drag: false,
  arrows: false,
  pagination: false,
  autoScroll: { speed: -1.2, pauseOnHover: false, pauseOnFocus: false },
});
splideTop.mount(window.splide.Extensions);
splideBottom.mount(window.splide.Extensions);

入れ替え処理

画面右側 75% 付近の要素を検出し、クローンをアニメーションさせます。

const TRIGGER_RATIO = 0.75;
const SWAP_EVERY_MS = 3000;

function swapOnceWithAnimation() {
  const topPick = findClosestSlide(document.querySelector('.splide1'));
  const botPick = findClosestSlide(document.querySelector('.splide2'));
  if (!topPick || !botPick) return;

  const topImg = topPick.el.querySelector('img');
  const botImg = botPick.el.querySelector('img');
  if (!topImg || !botImg) return;

  // クローンを生成して動かす
  const cTop = makeCloneFrom(topPick.rect, topImg);
  const cBot = makeCloneFrom(botPick.rect, botImg);

  topImg.style.visibility = 'hidden';
  botImg.style.visibility = 'hidden';

  const toTop = { top: topPick.rect.top + window.scrollY, left: topPick.rect.left + window.scrollX };
  const toBot = { top: botPick.rect.top + window.scrollY, left: botPick.rect.left + window.scrollX };

  gsap.to(cTop, { duration: 0.6, top: toBot.top, left: toBot.left, ease: 'power2.inOut' });
  gsap.to(cBot, {
    duration: 0.6, top: toTop.top, left: toTop.left, ease: 'power2.inOut',
    onComplete: () => {
      // src を入れ替えて本体を更新
      const tmp = topImg.src; topImg.src = botImg.src; botImg.src = tmp;
      topImg.style.visibility = 'visible';
      botImg.style.visibility = 'visible';
      cTop.remove(); cBot.remove();
    }
  });
}
setInterval(swapOnceWithAnimation, SWAP_EVERY_MS);

💻 デモ（CodePen）

以下のCodePenで動作をご確認いただけます：

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

🧰 使用技術

  • HTML / CSS
  • splide.js
  • GSAP（GreenSock Animation Platform）

🧠カスタマイズのポイント

  • 入れ替え間隔：SWAP_EVERY_MS を変更（例：2000にすれば2秒ごと）
  • トリガー位置：TRIGGER_RATIO を変更（例：0.6で画面の60%位置）
  • アニメーション速度：gsap.to() の duration を調整
  • 動きの種類：ease を power4.out や elastic.out に変更可能

ちょっとした調整で雰囲気が大きく変わります。

応用アイデア

  • 商品一覧：上下のアイテムが交差する動きで印象アップ
  • ポートフォリオ：写真や実績を動きのある形で表示
  • ヒーローヘッダー：サイト冒頭に配置して動きで惹きつける

ビジュアルが多い場面で特に効果的です。

まとめ

クロスグライドアニメーションは、スクロールアニメーションの一種としてカルーセルを交差させる独自の演出です。
Splide.js でカルーセルを構築し、GSAP でアニメーション制御を行うことで、わずかなコード量でも実装できます。

画像を動画にするなど、オリジナルのカスタマイズをしてみてください！