まずはFlipの導入方法から解説します。
導入方法はいくつかありますが、今回は2通りの方法をご紹介します。

1. CDN
   公式サイトから、「CDN」のタブを開き「Flip」にチェックを入れます。
   コードが出てきますので、ピンクで囲ったコードをコピーして任意の場所（</body>の手前など）に貼り付けてください。
   
   GSAP自体の導入もまだであれば、水色で囲ったコードも一緒に貼り付けてください。
   この時、水色のコードが上になるよう貼り付けないとエラーになりますのでご注意ください。
2. 直接ファイルをダウンロードする
   GitHubの、dist>Flip.min.jsをダウンロードします。
   ダウンロードしたファイルは任意の場所に設置してください。
   GSAP自体の導入もまだであれば、dist>gsap.min.js も一緒にダウンロード、設置してください。
   

Flipは、DOM要素のレイアウト変更を、スムーズにアニメーションする仕組み です。
「ある要素がAの位置からBの位置に移動する」とき、その距離差分を自動的に補間してくれるため、レイアウトがガラッと変わるUIでも自然な動きを実現できます。

ちなみにFlip（フリップ）は「First（最初）」、「LAST（最後）」、「Invert（反転）」、「Play（再生）」の頭文字を取ったものです。

では実際に動きを確認し、解説していきます。

▼実際の動き（ボタンを押して移動します）

See the Pen
Untitled by ishi (@qwwbetnz-the-typescripter)
on CodePen.

▼Flipの基本的な書き方

gsap.registerPlugin(Flip);
const ele = document.querySelector(".ele");
const btn = document.getElementById("moveBtn");

btn.addEventListener("click", () => {
  // 1. 現在の状態を取得
  const state = Flip.getState(ele);

  // 2. 変化後となる状態を指定（今回はクラスの付け外し）
  ele.classList.toggle("is-move");

  // 3. Flipアニメーションを実行
  Flip.from(state, {
    duration: 0.5,
    ease: "power1.out"
  });
});

Flipは3ステップで構築します。

1.現在の要素の状態を取得

const state = Flip.getState(ele);

デフォルトではposition、size、rotationプロパティを取得します。他にも取得したいプロパティがある場合は、下記のように指定できます。

// backgroundColorとcolorを取得
const state = Flip.getState(ele, { props: “backgroundColor,color” });

2.変化後となる状態を指定

ele.classList.toggle("is-move");

変化後の状態を指定します。今回は要素にis-moveクラスを付け外しする事で、CSS側で変化後を指定しています。

3.Flipアニメーションを実行

Flip.from(state, {
duration: 0.5,
ease: "power1.out"
});

アニメーション記述はとても簡単で、上記のように短いコードで可能です。
上記の例では、1でstateに記録した状態と、2の変化後の状態を比較し、スムーズに変化するアニメーションを実行してくれます。
duration（変化にかかる時間）とease（イージング）なども指定できます。

注意点として、要素のサイズを正確に測るためにbox-sizing: border-box;を付けるのがおすすめです。

スムーズなUI遷移

要素の位置やサイズの変化を自然にアニメーションできます。

• 例：カードをクリック → その位置から詳細パネルが滑らかに展開
• 例：リストの並び替え → 項目が飛び飛びにならず連続的に移動

DOM操作との親和性

既存のHTMLを大きく変えずにアニメーションが可能になります。

• クラス切り替えやスタイル変更だけでOK
• 複雑な座標計算など不要

カードUIやモーダル展開に最適

クリックなどの操作に応じてカードやパネルをスムーズに動かせるので、ユーザーがどの要素を操作したかを自然に追えるUIを作るのに向いています。

• 画像クリックで詳細を表示
• グリッドからリストへの切り替え

このように、Flipは「要素の動きを自然に見せる」「ユーザー操作での動きを分かりやすくする」「カードやモーダルのUIに最適」というメリットがあります。

カードをクリックで、そのカードが上に移動して拡大+詳細テキストが表示するアニメーションを作ってみました。
再度そのカードをクリックするか、別のカードをクリックする事で、カードが下段に戻っていきます。

Flipの強みである、スムーズなレイアウト変更と要素のプロパティ変更が活かせているかと思います。

See the Pen
【GSAP】Flip_Animation by ishi (@qwwbetnz-the-typescripter)
on CodePen.

▼コード

See the Pen
【GSAP】Flip_Animation by ishi (@qwwbetnz-the-typescripter)
on CodePen.

今回紹介したGSAPのFlipプラグインを使えば、カードやパネルなどのレイアウト遷移をスムーズに、かつ自然なアニメーションで実装できます。

ポイントは

• Flip.getState() で現在の要素の位置・サイズを取得
• DOMやクラスを変更して見た目を切り替え
• Flip.from(state) で自動的にスムーズに遷移

この流れを抑えれば、クリックで詳細を展開するカードUIや、リストの並べ替えなどにも応用できます！

ぜひ本記事を参考に、サイトなどにFlipを取り入れてみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法