Gsapを使用したメインビジュアルのアニメーション #1/2

Gsapを使用して、メインビジュアルのアニメーションを実装します。参考にしていただければ幸いです。

実装のアニメーション

リプレイ

まず、画面全体を黒色のカバーで覆います。
カバーを4つに区切り、画面外にスライドさせた後、メインビジュアルのテキストを表示させています。

ポイントの解説

gsapのtilelineでアニメーションを制御する。tilelineについてはこちらを参照ください。

4つに区切るボックスの中に子要素で更にボックスを作ることにより、アニメーションがより明確になります。
以下はspanタグを使った一例です。

<div class="content-cover flex absolute top-0 left-0 right-0 w-[100%] h-[100vh]">

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

</div><!-- /.content-cover -->

サンプルコード

サンプルコードを配布いたします。参考にしていただければ幸いです。