カードをめくるアニメーション（Flip Animation）

2023年11月28日2023年12月5日

URLをコピーしました！

クリックすると裏返るフリップアニメーションの実装について学びました。

実装のポイントについてメモします。

サンプル

ポイント

裏面用のカードはあらかじめ裏向けておく

該当箇所のコード↓

.card__visual.-back {
  z-index: 0;
  rotate: y 180deg;//裏向ける。
}

表裏両方のカード（.card-visual）にbackface-visibility:hidden;が指定されています。これは要素が裏側を向いたときに、裏面を非表示に指定する指定です。

何もしなければ、どちらのカードも裏返ったときに見えなくなります。表面は不可視で合っていますが、裏面は可視にする必要があるためrotate:y 180deg;を指定します。

rotateを指定しなかった場合の挙動↓

動きの性格（イージング）を変える

Y軸基準に回転させる
奥行き感を出すためにz軸方向に移動させる

上記二つの動きを設定しています。これらの動きのイージングは異なる値を設定しています。

該当箇所のコード↓

gsap.to(card.children, {
      rotationY: "+=180", //固定値の場合は、値が変わらないず再度表面に戻らないから相対値にする。
      ease: "power2.inOut", //加速して減速する
      duration: 1, 
      onComplete: oneClick, 
});
gsap.to(card.children, {
      z: "-=200",
      ease: "power2.in", //徐々に加速
      duration: 0.5,
      repeat: 1, //2回繰り返す
      yoyo: true, //繰り返すときに逆に移動。初回は「値なし」から-200まで進む。2回目は、-200から「値なし」に戻る
});

連続のクリックを防止する

カードのアニメーション中にクリックしても、イベントは呼び出されるため連続クリック防止の処理を追加しました。

該当箇所のコード↓

cards.forEach((card) => {
  function flip() {
    gsap.to(card.children, {
      rotationY: "+=180", 
      ease: "power2.inOut", 
      duration: 1, 
      onComplete: oneClick, //アニメーション完了後に再度、クリックイベントを登録（連続クリック防止のため）
    });
    //z軸方向移動のアニメーションは省略
  }
  function oneClick() {
    card.addEventListener("click", flip, { once: true });//onceで一回だけ呼び出し
  }

  oneClick();//初回実行
});

連続クリック防止しなかった場合の挙動↓