ブログ

テキストが上に移動しロゴが表示されるオープニングアニメーション

ときどき見かけるテキストとロゴを使用したオープニングアニメーションの実装方法について解説しています。順を追ったアニメーションのため、実装にはGSAPのタイムラインを使用しています。

実装例

下記が実装例です。

テキストとロゴを使用したアニメーション

ページ読み込み後にテキスト、ロゴ、背景の順にアニメーションするように設定しています。もう一度実行したい場合は、右下にある「Return」ボタンをクリックしてください。

シンプルで実装工数も低いアニメーションですが、コピーとなるテキストへ効率良く視線を誘導できるかもしれません。

解説

HTMLは次のとおりです。

HTML
<div class="loading" data-opening-animation>
  <div class="loading__inner">
    <p class="loading__text" data-opening-animation="text">
      自然の中でリラックスしながら<br />仕事ができる森のシェアオフィス
    </p>
    <figure class="loading__logo" data-opening-animation="logo">
      <img src="https://masatonishi.github.io/codepen_imgs/text-moving-up-loading-animation/logo.svg" alt="ロゴ" width="200" height="105" />
    </figure>
  </div>
</div>

動かしたい要素にはdata-opening-animationなどの属性を追加しています。CSSはアニメーションに関わるものはなく、レイアウトの調整をメインに指定しています。

JavaScriptの処理を言語化

JavaScriptのアニメーションに関するコードは以下のとおりです。

JavaScript
// オープニングアニメーション用の要素を取得
const loading = document.querySelector("[data-opening-animation]");
const text = document.querySelector('[data-opening-animation="text"]');
const logo = document.querySelector('[data-opening-animation="logo"]');


// 初期状態の設定
gsap.set(text, { autoAlpha: 0, y: 60 }); // テキストを非表示に/下に配置
gsap.set(logo, { autoAlpha: 0 }); // ロゴを非表示に


// ページ読み込み完了時にアニメーションを開始
window.addEventListener("load", () => {
  // GSAPタイムラインを作成
  const tl = gsap.timeline();


  tl.to(
    text, // textのアニメーションを指定
    {
      autoAlpha: 1, // autoAlphaを1に
      duration: 1.33, // 1.33秒かけて
      ease: "power2.inOut", // イージングを指定
    }
  )
    .to(
      text, // textのアニメーションを指定
      {
        y: -10, // テキストを少し上に移動
        duration: 1.33, // 1.33秒かけて
        ease: "power2.inOut", // イージングを指定
      },
      "+=0.66" // 前のアニメーションから0.66秒後に開始
    )
    .to(
      logo, // logoのアニメーションを指定
      {
        autoAlpha: 1, // autoAlphaを1に
        duration: 1.33, // 1.33秒かけて
        ease: "power2.inOut", // イージングを指定
      },
      "-=1.33" // 前のアニメーションが終了する1.33秒後に（＝テキスト移動と同時に開始）
    )
    .to(
      loading, // loadingのアニメーションを指定
      {
        clipPath: "inset(0 0 0 100%)", // clip-pathをinset(0 0 0 100%)に
        duration: 1, // 1秒かけて
        ease: "power2.inOut", // イージングを指定
      },
      "+=0.33" // 前のアニメーションから0.33秒後に開始
    );
});

各行の実行内容はコメントに記載の通りです。

一言でまとめるとテキストを表示して上に移動させ、ロゴを表示してローディング画面を左側からスライドアウトさせています。

durationとeasingと各アニメーション開始のタイミングを工夫することで滑らかな繋がるような動きを実現しています。

シンプルに実装できる割に、インパクトのあるアニメーションだと思います。

キーワード一覧