はじめに

初めまして、株式会社SHIFT デザイン部 デザイン室 フロントエンドエンジニアの岩嵜です。

今回は、コーポレートサイトやLPなどでアニメーションを実装する際に重宝してるGSAPについて紹介します。

｜GSAPとは

GSAPはGreenSock社が開発しているJavaScriptのアニメーションライブラリです。多機能でかつシンプルな記法で書けるので、アニメーションを実装する際にはかなりおすすめです。

以前、アニメーションライブラリでTweenMaxやTweenLiteを使用した経験がある方もいるかもしれませんが、TweenMaxやTweenLiteはGSAPの一つのモジュールです。

2019年にリリースされたGSAP3でそれらのモジュールが統合されました。

｜導入方法

■npmもしくはyarnを利用する場合

インストールしたバージョン

node: v18.2.0

下記のコマンドでパッケージをインストールしてください。

npm i gsap // npmを利用する場合

yarn add gsap　// yarnを利用する場合

その後、jsファイル内で下記のモジュールを読み込めば導入完了になります。

import gsap, { Power4 } from "gsap";

Power4はeasingのモジュールです。今回、Power4.easeOutをJavaScriptのコード内で使用するため追加してます。

必要ない場合は削除してください。

■CDNを利用する場合

下記の公式サイトから、CDNを取得して読み込めば導入完了になります。

｜GSAPの使い方

以下ではGSAPの使い方について解説します。

GSAPは主に「Tween」と「Timeline」によって構成されていますので、この二つの機能とライブラリとして人気のある「ScrollTrigger」をまとめていきます。

■Tweenについて

Tweenの説明については、公式から一部抜粋させていただきました。

「A Tween is what does all the animation work - think of it like a high-performance property setter. You feed in targets (the objects you want to animate), a duration, and any properties you want to animate and when its playhead moves to a new position, it figures out what the property values should be at that point applies them accordingly.」

引用: https://greensock.com/docs/v3/GSAP/Tween

小難しい説明になってますが、ここではざっくり「多様なアニメーション処理を実装する機能」くらいの認識で問題ないです。

－Tweenの主なメソッド

gsap.set()

アニメーションの対象要素の初期値を設定します。

HTML

<div class="c-box c-box--red"></div>

SCSS

.c-box {
  width: 40px;
  height: 40px;
  border-radius: 4px;

  &--red {
    background: #d50227;
  }
}

JavaScript

gsap.set(".c-box",{
  x: 0, // x軸方向に0pxの位置に設定する
  y: 0 // y軸方向に0pxの位置に設定する
});

gsap.to()

アニメーションの対象要素を「現在値から指定した値へ変化させる」際に使用されます。
※HTML, SCSSはgsap.set()と同様。

JavaScript

gsap.to(".c-box", {
  x: 500, // x軸方向に500px移動する
  rotation: 180, // 180度回転する
  duration: 3, // 3秒間アニメーションする
  delay: 3, // 3秒後にアニメーションする
  ease: Power4.easeOut　// アニメーションの変化率をPower4.easeOutにする
});

gsap.from()

アニメーションの対象要素を「指定した値から現在値に変化させる」際に使用されます。
※HTML, SCSSはgsap.set()と同様。

JavaScript

gsap.from(".c-box", {
  x: 500,
  rotation: 180,
  duration: 3,
  delay: 3,
  ease: Power4.easeOut
});

gsap.fromTo()

アニメーションの対象要素を「開始値(toで指定した値)から終了値(fromで指定した値)に変化させる」際に使用されます。
※HTML, SCSSはgsap.set()と同様。

JavaScript

gsap.fromTo(".c-box",
  {　x: 0, rotation: 0 },
  {　x: 500, rotation: 180, duration: 3, delay: 3, ease: Power4.easeOut }
);

－主なプロパティ

x: x軸方向への移動量
y: y軸方向への移動量
repeat: アニメーションのリピート回数
delay: アニメーションが開始するまでの時間
duration: アニメーションの長さ
ease: アニメーションの変化率
onUpdate: アニメーションがアップデートされる際に呼び出される関数
onComplete: アニメーション終了した際に呼び出される関数

■Timelineについて

Timelineの説明については、公式から一部抜粋させていただきました。

「A Timeline is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without Timelines, building complex sequences would be far more cumbersome because you'd need to use a delay for every animation.」

引用: https://greensock.com/docs/v3/GSAP/Timeline

小難しい説明になってますが、ここではざっくり「連続したアニメーション処理を実装する際に便利な機能」くらいの認識で問題ないです。

－Timelineの主なメソッド

gsap.timeline()

アニメーション（Tween）を連続して設定する際に使用されます。
※HTML, SCSSはgsap.set()と同様。

JavaScript

const tl = gsap.timeline();
tl.to(".c-box", { x: 300, rotation: 180, duration: 3, ease: Power4.easeOut })
  .to(".c-box", { y: 300, rotation: 360, duration: 3, ease: Power4.easeOut })
  .to(".c-box", { x: 0, rotation: 540, duration: 3, ease: Power4.easeOut })
  .to(".c-box", { y: 0, rotation: 720, duration: 3, ease: Power4.easeOut });

■ScrollTriggerについて

ScrollTriggerはスクロールイベントを制御してくれるライブラリです。

スクロールアニメーションをシンプルに書くことができます。

具体例を出すと、よくLPやコーポレートサイトなどで実装されているスクロール後にフェードインさせるアニメーションも簡単に実装可能です。

【導入方法】

－npmもしくはyarnを利用する場合

ScrollTrigger使用する場合、下記のようにプラグインの登録すれば、使用可能になります。

import gsap, { Power4 } from "gsap";

== 下記が今回追加した記述 ==
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger); // プラグイン登録

－CDNを利用する場合

先ほど同様下記の公式サイトから、ScrollTriggerのCDNを取得して読み込めば使用可能です。

－記述例

HTML

<div class="c-box c-box--red"></div>
<div class="c-box c-box--orange"></div>
<div class="c-box c-box--pink"></div>

SCSS

.c-box {
  margin-top: 120px;
  width: 40px;
  height: 40px;
  border-radius: 4px;

  &--red {
    background: #d50227;
  }

  &--orange {
    background: #d54702;
  }

  &--pink {
    background: #d50291;
  }
}

JavaScript

ScrollTrigger.batch(".c-box", {
  onEnter: (batch) => gsap.to(batch, { rotation: 180, x: 500, duration: 3, ease: Power4.easeOut }),
  start: "top 50%"
});

－主なプロパティ

onEnter: トリガーが開始位置を超えたときに呼び出される関数
maker: マーカー機能で、トリガーの開始位置と終了位置が自動で表示されます。
pin: 特定のスクロール位置に要素をピン留めすることができます。
start: アニメーションの開始位置
end: アニメーションの終了位置
scrub: スクロール量に合わせてアニメーションが進む

｜さいごに

上記で紹介したのはGSAPの基本的な機能ですが、もっと詳しく知りたいという方は下記のドキュメントから情報探ってみてください。

ReactやVueを使用している場合でも問題なくGSAPは使用可能です。

特に個人的にはスクロールアニメーションを実装する際にscroll triggerを使用するとシンプルに実装できるなと思ったので、参考にしてもらえると嬉しいです。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/