Zenn
🍓

ランダムに文字がちらつくアニメーション

2023/03/20に公開
HTML
JavaScript
Scss
アニメーション
GSAP
tech

ランダムに文字がちらつくアニメーションについて学び中です。

サンプル

サンプルはこちら↓

コード抜粋

アニメーションに関係するコードのみ抜粋しました。変数名はとても雑です、

script.js
window.addEventListener("DOMContentLoaded", (e) => {
  const $charElements = $$(".p-chars");

  setInterval(() => {
    const d = shuffleArray($charElements, 1);

    d.forEach((elem, index) => {
      const front = elem.querySelector(".p-char.-front");
      const back = elem.querySelector(".p-char.-back");
      const frontTL = gsap.timeline();
      const backTL = gsap.timeline();

      const s = 0.3;

      gsap.delayedCall(s, () => {
        frontTL.fromTo(
          front,
          {
            visibility: "hidden"
          },
          {
            visibility: "visible",
          }
        );
      });

      gsap.delayedCall(s + 0.02, () => {
        backTL.fromTo(
          back,
          {
            visibility: "visible",
          },
          {
            visibility: "hidden",
          }
        );
      });
    });
  }, 2000);
});

時間できたらコードのリファクタリングします。

参考サイト

参考サイトの動きと異なります。
一旦諦めました。
また時間置いて完璧に再現できるように挑戦します。
参考サイトはこちら↓
https://vaultroom.jp/

Discussion