今回は、ShopifyにGSAPを使用したアニメーションを追加する方法をご紹介します。

themeファイルにGSAPを読み込み

Shopifyのテーマファイル（今回はDawnを使用）のlayout / theme.liquid内、bodyタグ最下部に以下のCDNコードを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

これでGSAPを使う準備が整ったので、アニメーションの実装方法を簡単にご紹介していきます。

アニメーションを追加する

GSAPでは様々なアニメーションをつけることができます。

テキストをフェードインさせる

「タイトルです」というテキストを下からフェードインで表示するアニメーションです。

HTML

<h3 class="title">タイトルです</h3>

CSS

.title {
  font-size: 24px;
  color: #333;
  opacity: 0; //アニメーション前は非表示
  transform: translateY(-10px); //アニメーション前は下に10px
}

JavaScript

gsap.to(".title", {opacity: 1, y: 0, duration: 0.3});

上記のコードでは、「タイトルです」というテキストを0.3秒かけて下からフェードインするアニメーションを実装しています。

Timelineを使用して連続したアニメーションを実装する

画像をフェードインで表示させてから、テキストを画像の上に表示していきます。

HTML

<div class="container">
  <img src="{{ 'sample.png' | asset_img_url: '400x' }}" alt="サンプル画像" class="image">
  <p class="text">テキストです</p>
</div>

CSS

.container {
  position: relative;
  max-width: 400px;
  height: 400px;
}
.image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.text {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 24px;
  color: #333;
  background-color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(10px);
  z-index: 1;
}

JavaScript

const tl = gsap.timeline();
tl.to(".image", {
  opacity: 1,
  duration: 0.3
}).to(".text", {
  opacity: 1,
  y: 0,
  duration: 0.3
});

上記のコードでは、
①画像を0.3秒かけてフェードイン
②画像を表示するアニメーションが終わり次第、テキストを0.3秒かけて上からフェードイン
というアニメーションを実装しています。

通常連続したアニメーションは、delayというプロパティを使用する必要がありますが、GSAPのTimelineを使用することで簡単に実装ができます。
「前のアニメーションが終わってから何秒後にアニメーションを開始する」というように秒数を指定することも可能です。

まとめ

Shopifyのテーマテンプレートには既にきれいなアニメーションが実装されたセクションなどが多くあるため、あまり使用する機会はないかもしれません。
しかし、GSAPは本当にたくさんのアニメーションが実装できるのでセクションのカスタマイズ時などに使用してみるのもおすすめです。

導入自体はとても簡単なので、ぜひ一度お試しください。

※その他のアニメーションの詳しい実装方法は、公式サイトをご確認ください。