実装の考え方

SwiperとGSAPを使用してWebサイトのキービジュアルに使用できそうなリッチなアニメーションの作り方を解説します。Swiperでは、スライドが切り替わる瞬間に呼び出せるイベントとしてslideChangeTransitionStartが用意されてます。このイベントを使い、スライドが切り替わる瞬間にGSAPでアニメーションを実装します。

円形に切り替わる処理は、CSSのclip-pathプロパティのcircle()関数を使用します。clip-pathで最初は非表示にしておいて、表示する際は円形で表示するようにすることで、今回のデモのようなアニメーションを実装できます。

バージョン情報

この記事で使用しているSwiperとGSAPのバージョンは以下の通りです。

実装方法

それでは実際に実装していきましょう。
まずはHTMLになります。

HTML

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-slide-img">
        <img src="https://picsum.photos/640/360?random=1" alt="">
      </div>
      <!-- スライダー枚数分追加 -->
    </div>
  </div>
</div>

HTMLでは基本的なSwiperの構造になります。今回のデモでは画像が縮小されながら表示するので、画像をswiper-slide-imgクラスで囲っておきます。

CSS

円形に切り替わる実装はJavaScript側で実装するので、ここでは画像が縮小されながら表示する箇所のみを紹介します。

.swiper-slide.swiper-slide-active .swiper-slide-img {
  z-index: 1;
  transform-origin: center;
  animation: img-scale 5s linear;
}

@keyframes img-scale {
  0% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}

スライドがアクティブになったときは、Swiper側でアクティブなスライドにクラス(swiper-slide-active)が付与されるので、このクラスに画像を縮小表示されるキーアニメーションを設定します。

キーアニメーションでは、最初にscale: 1.1して拡大しておき、scaleを元に戻すことで画像を縮小されながら表示されることになります。

JavaScript

最後にJavaScriptを実装していきましょう。
次はこのデモの全コードになります。

new Swiper('.swiper', {
  slidesPerView: 1,
  effect: 'fade',
  loop: true,
  loopAdditionalSlides: 1,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  on: {
    slideChangeTransitionStart: (swiper) => {
      const activeSlide = swiper.slides[swiper.activeIndex];

      gsap.fromTo(activeSlide, {
        clipPath: 'circle(0% at 50% 50%)',
      }, {
        clipPath: 'circle(70.7% at 50% 50%)',
        duration: 1,
        ease: 'power3.in',
      })
    },
  }
});

スライド画像を重ねる

このデモでは、通常のSwiperのようにスライド画像が横から表示されるのではなく、画像が重なった状態からアニメーションで切り替わります。Swiperではスライドを重ねるにはeffect: 'fade'を設定することでスライドを重なった状態にできます。

new Swiper('.swiper', {
  effect: 'fade',
})

スライドを円形に切り替える

先述の通りにスライドの切り替わりの瞬間のイベントslideChangeTransitionStartにGSAPとclip-pathを使用して円形に切り替えるようにしましょう。

new Swiper('.swiper', {
  // ...
  on: {
    slideChangeTransitionStart: (swiper) => {
      const activeSlide = swiper.slides[swiper.activeIndex];

      gsap.fromTo(activeSlide, {
        clipPath: 'circle(0% at 50% 50%)',
      }, {
        clipPath: 'circle(70.7% at 50% 50%)',
        duration: 1,
        ease: 'power3.in',
      })
    },
  }
})

円形のアニメーションはアクティブなスライドに対して行うので、アクティブなスライドを取得します。これはslideChangeTransitionStartのコールバック関数の引数にあるactiveIndexから取得できます。

このアクティブなスライドに対してGSAPのfromToメソッドを使用してアニメーションさせます。fromToメソッドは、アニメーションの開始状態と終了状態を指定することができます。

開始状態では、clipPath: 'circle(0% at 50% 50%)'とし円形の状態で非表示にし、終了状態ではclipPath: 'circle(70.7% at 50% 50%)'とします。

このclipPathの値はこちらから確認できるので確認してみてください

先ほどのサイトで、clip-path: circle()での画像が全表示する際の値が70.7%であるので、この値を終了状態に設定しています。

注意事項

このデモでは、Webサイトのキービジュアルに使用できるようにループで自動再生するデモを作成しました。もしclip-pathでの円形で切り替わるアニメーションをスライドの前後で切り替わるようにする場合は、次のスライドの切り替わりは上手くいくのですが、前のスライドに切り替える際にはアニメーションがうまくいかないことがあります。

原因は、Swiperのeffect: 'fade'が設定されているため、切り替える時のスライドのopacityが0になるためです。なので、その点も考慮して実装してみてください！