【GSAP】コピペOK!GSAPカーテンテキストアニメーション

はじめに
- この記事の概要
- 対象読者
今回の完成予定
GSAPの導入
コードの紹介
- アニメーションを意識したプロパティの追加
- GSAPの記述
おまけ
さいごに

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)を使い、カーテンテキストアニメーションを実装していきたいと思います。GSAPの基本的な使い方は下記の記事を参考にしてください!!!

【初学者向け】GSAPでテキストアニメーションをやってみた！！

対象読者

web制作でアニメーションの実装をしたい方

今回の完成予定

今回はGSAPを用いてカーテンアニメーションを実装してみたいと思います。
やはりGSAPを使うと簡単に実装できるので、ぜひお試しください！
今回はHTML&CSSからGSAPまで手順を分け解説していきたいと思います。

GSAPの導入

GSAPを利用するには、公式HPからダウンロードするか、CDNでも提供されているので公式HPを参照してください。
今回はCDNを利用していきたいと思います。

参考TopページGreenSock

コードの紹介

HTML

<body>
  <p class="text">
    <span class="text__word">Hello World</span>
    <span class="text__bg"></span>
  </p>
</body>

CSS

body {
/*全体レイアウトのための記述*/
  min-height: 100vh;
  background-color: #333;
  color: #353535;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 40px;
  color: #fff;
  position: relative;
}

.text__bg {
  display: block;
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
}

今回のアニメーションを実現するためにはclass名text__bgが重要になります。
このオブジェクトを操作し実現することになります。
テキストに対し背景色白のオブジェクトが覆いかぶさっていると思います、下記のようになっていれば大丈夫です！

アニメーションを意識したプロパティの追加

先程も少し説明しましたが、今回はclass名text__bgが重要になります。
実現したいアニメーションをもう一度確認すると、class名text__bgが左方向から右方向に伸びてから左に戻るときにテキストが出現するアニメーションになっていると思います。
それを踏まえ今回はto()メソッドを使用するのでアニメーション開始前の状態を追記します。

body {
/*全体レイアウトのための記述*/
  min-height: 100vh;
  background-color: #333;
  color: #353535;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 40px;
  color: #fff;
  position: relative;
}

.text__bg {
  display: block;
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
  transform-origin: left;
  transform: scaleX(0);
}

.text__word {
  opacity: 0;
}

今回はclass名text__bgが右方向に伸びるのをtransform: scaleX;で実現しようと思います。transform: scaleX;だけでは伸びる方向が指定できないので、transform-origin: left;で中心点を左にし左から右に伸びるように指定しています。
またテキストのopacityを0にして消しています。
この状態でブラウザを確認すると何も写っていないと思います。
ここからto()メソッドを使用して完成させて行きたいと思います。

GSAPの記述

今回のアニメーションさせる手順として3ステップあります。
1.左から右に白色背景のオブジェクトを伸ばす
2.テキストの表示
3.右から左に白色背景のオブジェクトを縮める
これを順に行っていきたいので、Timelineメソッドを使用して実装して行きたいと思います。
まだTimelineメソッドの使用方法がわからない方は下記を参照してください。

【初学者向け】GSAP Timelineを使ってみた!!!

const tl = gsap.timeline({ delay: 1 });
firstBg = document.querySelectorAll(".text__first-bg");
word = document.querySelectorAll(".text__word");

tl.to(
  firstBg, 
  {
    scaleX: 1,
    duration: 0.4,
    ease: Power2.easeOut,
  })
  .to(
    word,
    {
      opacity: 1,
      duration: 0.1,
    },
    "-=0.1"
  )
  .to(firstBg, {
    scaleX: 0,
    duration: 0.4,
    ease: Power2.easeOut,
  });

Timelineメソッドを用いて一つずつのアニメーションを連結し、実現しています。
scaleXを1にしてからテキストのopacityを0にして最後またscaleXを0にしてもとに戻すようにしています。
Timelineメソッドで連続してアニメーションを行う際はdurationで一つずつのアニメーション時間をいじることも重要です。時間の制御がうまくできていないと見栄えがかなり悪くなります。
またアニメーションのイージングを設定することにより印象も変わってくると思います。
イージングを詳しく知りたい方は下記を参照してみてください。
これにて完成になります！！！

【GSAP】テキストアニメーションにイージング全種類で比較してみた!

おまけ

右から左に伸ばしたいときはtransform-origin: right;にしてください！

body {
/*全体レイアウトのための記述*/
  min-height: 100vh;
  background-color: #333;
  color: #353535;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 40px;
  color: #fff;
  position: relative;
}

.text__bg {
  display: block;
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
  transform-origin: right;
  transform: scaleX(0);
}

.text__word {
  opacity: 0;
}