切り開かれるオープニングアニメーション

説明

サイト読み込み時に、要素が左右に切り開かれるオープニングアニメーションです。

使用している技術：HTML, TailwindCSS, JavaScript, GSAP

CSSでdiv要素を左右に配置して真ん中にボーダーを配置し、GSAPでアニメーションを実装しています。

インストール

GSAPとTailwindCSSをインストールします。詳しくはドキュメント参照して下さい。

GSAP is "framework agnostic", this means it can be used in React, Webflow, Wordpress, or any other JS/Web frameworks. The core GSAP file and all the plugins are just Javascript files.

gsap.com

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

tailwindcss.com

npm i -D gsap

npm install -D tailwindcss
npx tailwindcss init

Aria属性

スクリーンリーダーを使用しているユーザーにもわかりやすいように、aria属性を使用しています。

属性名
aria-label	スクリーンリーダーにloadingと読ませる
aria-hidden=“false”	読み上げ可能にしておく

<div
  aria-label="loading"
  aria-hidden="false"
></div>

アニメーション完了時読み上げは不要になるので、aria-hidden="true"に変更します。

onComplete: function () {
  setTimeout(() => {
    /* ~~省略~~ */
    load.setAttribute("aria-hidden", "true");  /* アニメーション完了時読み上げスキップする */
  }, 1000);
},

コード

<!-- HTML -->

<div
  class="js-load group fixed left-[0] top-[0] h-screen w-screen bg-[#020045] [&.is-loaded]:[background:0_0]"
  aria-label="loading"
  aria-hidden="false"
>
  <div
    class="absolute -top-2/4 right-2/4 h-[200%] w-[200%] translate-x-[0] translate-y-[0] -skew-x-[40.89deg] bg-red-900 transition [transition:transform_cubic-bezier(0.05,_1,_0.125,_1)_1.5s] group-[.is-loaded]:-translate-x-[50vw] group-[.is-loaded]:-translate-y-[50vh] group-[.is-loaded]:-skew-x-[40.89deg]"
  >
  </div>
  <div
    class="absolute -top-2/4 left-2/4 h-[200%] w-[200%] translate-x-[0] translate-y-[0] -skew-x-[40.89deg] bg-red-900 transition [transition:transform_cubic-bezier(0.05,_1,_0.125,_1)_1.5s] group-[.is-loaded]:translate-x-[50vw] group-[.is-loaded]:translate-y-[50vh] group-[.is-loaded]:-skew-x-[40.89deg]"
  >
  </div>
  <div
    class="absolute left-2/4 top-[0] h-full w-px -skew-x-[40.89deg] bg-slate-100/30 group-[.is-loaded]:hidden"
  >
    <div
      class="js-load-border absolute bottom-[0] left-[0] h-[0] w-full bg-white [transition:height_0.5s_linear]"
    >
    </div>
  </div>
</div>

/* js */

  import gsap from "gsap";

  const load = document.querySelector(".js-load");
  const border = document.querySelector(".js-load-border");
  const TL = gsap.timeline();

  addEventListener("DOMContentLoaded", () => {
    if (!load || !border) return;

    TL.from(border, {
      height: "0",
      ease: "power2.inOut",
    }).to(border, {
      height: "100%",
      autoAlpha: 1,
      duration: 2,

      onComplete: function () {
        setTimeout(() => {
          load.classList.add("is-loaded");
          TL.to(load, {
            autoAlpha: 0,
            duration: 0.4,
            delay: 0.4,
            ease: "power2.inOut",
          });
          load.setAttribute("aria-hidden", "true");
        }, 1000);
      },
    });
  });