Next.jsにGSAPでアニメーションをつけたら、一瞬アニメーション前の状態がフラッシュするので対処した

概要

• Next.jsにGSAPを利用してアニメーションをつけているのですが、初回アクセス時に一瞬アニメーション前の状態がフラッシュするので、対処したという話です。
• どのようなアニメーションかというと、透明な要素をフェードインさせるアニメーションになります。

ゴール

• 初回アクセス時に一瞬アニメーション前の状態がフラッシュするのをなくす

作成物

• コミット　（コミットメッセージ間違えました）

参考

• TweenPages | Docs
  • ここから、SSRを利用する場合、一瞬アニメーションが適用される前の状態がフラッシュして表示されるので、要素の初期状態を適切にする必要があると認識しました
  • つまり、初期状態を透明にして、gsap.fromtoで透明な状態から不透明な状態へアニメーションさせることでうまくいくのでは？と仮説を立てました

手順

gsap.fromtoで初期状態と最終の状態を記述する

• 以下のように、透明で少ししたから、不透明で元の位置に遷移させるアニメーションを適用します

// pages/index.tsx

// 中略

    gsap.fromTo(
      '.blogCard',
      {
        y: 30,
        autoAlpha: 0,
        stagger: {
          each: 0.3,
        },
      },
      {
        y: 0,
        duration: 2,
        ease: Power4.easeOut,
        autoAlpha: 1,
        stagger: {
          each: 0.2,
        },
      },
    );

// 中略

適用させる要素の初期状態を変更する

• 適用させる要素の初期状態を、アニメーションの初期状態と一致させるように透明にしました

// pages/index.tsx
// 中略
             <div className='blogCard' style={{ opacity: 0 } }>
// 中略

• 上記で完了です。
• 無事フラッシュしていた事象が解決しました。