今回はGSAPを使ったアニメーションに関する内容になります。過去にScrollTriggerプラグインを使ってスクロールに連動したアニメーションなどについて紹介してきましたが、今回もGSAPのとても便利なプラグインである「Flipプラグイン」を使って要素の移動やサイズ変更などにトランジションのアニメーションをつける方法について基本的な使い方などをまとめてみました。   GSAPはとてもメジャーなアニメーションのライブラリで、導入方法や基本的な使い方については過去記事「JavaScriptのアニメーションライブラリ「GSAP」を使ってみる」にて詳しくまとめていますのでご参考に。   では、早速導入方法から見ていきます。npmなどでインストールした場合には下記のようにライブラリをインポートします。スクロールアニメーションのプラグインであるScrollTriggerプラグイン同様にプラグインを有効化するために、「registerPlugin()」でプラグインを登録します。

import { gsap } from 'gsap';
import { Flip } from 'gsap/Flip';
gsap.registerPlugin(Flip);

  CDNで使う場合には、GSAPのコアスクリプトとFlipプラグインのスクリプトを読み込みます。

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

  今回はグリッド上に並んだコンテンツのレイアウトを入れ替える時にトランジションを適用して動きをつけたアニメーションをサンプルに進めていきます。HTMLは下記のようにアニメーションの対象となるコンテンツ要素と、アニメーションを実行するボタン要素を配置しています。

<div class="flex-container js-flip-animation-trigger">
  <div class="flex-item js-flip-animation-element">コンテンツ1</div>
  <div class="flex-item js-flip-animation-element">コンテンツ2</div>
  <div class="flex-item js-flip-animation-element">コンテンツ3</div>
  <div class="flex-item js-flip-animation-element">コンテンツ4</div>
</div>
<button type="button" class="js-flip-animation-play">play</button>

  CSSではアニメーション適用前と、適用後のスタイルを用意しておきます。JS側ではclassを付与することでアニメーション後のスタイルになるようにしています。ここでは複数列複数行にFlexboxで配置されたレイアウトの並び順を逆にする変化をつけています。また、Flipプラグインでのアニメーション処理中には専用のclassを付与されるようにするので、そのスタイルも用意しています。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.flex-container.fliped {
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}
.flex-item {
  width: calc(50% - 10px);
  height: 200px;
}
.flex-item.flipping {
  opacity: 0.7;
}

  続いてスクリプトになります。まず、Flipプラグインの基本的な使い方としては、初めに対象となる要素の初期状態の情報を「Flip.getState()」メソッドで取得しておきます。そして、その情報を使って「Flip.from()」を実行することでアニメーション処理を実行していきます。このメソッド内ではいろんなオプションが用意されており、細かくアニメーションの調整ができるようになっています。

let state = Flip.getState('.js-flip-animation-element');
let isReverse = false;
const forward = (play) => {
  document.querySelector('.js-flip-animation-trigger').classList.add('fliped');
  Flip.from(state, {
    duration: 1.4,
    ease: 'power1.inOut',
    absolute: false,
    fade: true,
    toggleClass: 'flipping',
    stagger: 0.1,
    onComplete: () => {
      state = Flip.getState('.js-flip-animation-element');
      isReverse = true;
      play.disabled = false;
    }
  });
}
const reverse = (play) => {
  document.querySelector('.js-flip-animation-trigger').classList.remove('fliped');
  Flip.from(state, {
    duration: 1.4,
    ease: 'power1.inOut',
    absolute: false,
    fade: true,
    toggleClass: 'flipping',
    stagger: 0.1,
    onComplete: () => {
      state = Flip.getState('.js-flip-animation-element');
      isReverse = false;
      play.disabled = false;
    }
  });
}
document.querySelector('.js-flip-animation-play').addEventListener('click', (event) => {
  event.target.disabled = true;
  if(!isReverse) {
    forward(event.target);
  } else {
    reverse(event.target);
  }
});

  上記のコードをもとに作成したサンプルはこちらに用意していますので、実際に動きなどもチェックしてみてください。その他、Flipプラグインでは専用のメソッドが用意されており、これらを呼び出すだけで簡単にアニメーションを実装することができます。  

Flip.getState()	対象要素の位置やサイズ、不透明度などの現在の状態を取得します。取得した情報はFlipの処理に使われることでトランジションのアニメーションをつけられるようになります。第一引数には対象要素をセレクタで指定します。第二引数でパラメーターを受け渡すこともできます。
Flip.from()	Flipのアニメーション処理を実行します。第一引数にはFlip.getState()で取得したステートが入ります、そして第二引数でオプションを指定します。
Flip.isFlipping()	Flipのアニメーション処理中かどうかの判定をすることができます。
Flip.killFlipsOf()	Flipのアニメーション処理を強制的に終了します。第一引数に指定した要素に関連するアニメーションが終了します。

  上記のサンプルでは、ボタンクリックでコンテンツの並び順を順方向と逆方向を切り替えるようにする処理になります。デュレーションやイージングの設定については、スクロールアニメーションと同じように設定しますのでわかりやすいですね。それ以外にもFlipで使えるオプションなどがありますので、下記に詳しくまとめてみました。  

duration	Flipのアニメーション実行時間を指定します
ease	Flipのアニメーションのイージングを指定します
absolute	Flipのアニメーション処理中は対象要素の位置が絶対位置指定になります。要素の移動などでレイアウトに影響する場合には指定します。
fade	Flipのアニメーション処理の変化をクロスフェードで表現できます。変化をなめらかに見せることができます。
toggleClass	Flipのアニメーション処理中に付与されるclassを指定できます。
stagger	複数要素を対象とした場合に、時間差をつけてアニメーションさせることができます。
onComplete	Flipの処理が完了した時に実行されるコールバック関数を定義することができます。

 

---

  今回はGSAPのFlipプラグインを使って要素の移動やサイズ変更に対してトランジションのアニメーションをつけてみました。CSSだけで対応できるものもありますが、複雑なものや離れている要素を跨いだ場合には限界があるので、このようなプラグインが用意されているのはとてもありがたいですね。工夫次第でいろんなアイデアを形にできるので使いこなせるようになりたいですね。   （参考にさせていただいたサイト） GreenSock | Docs | Plugins | Flip