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

はじめに
- この記事の概要
- 対象読者
gsap連続するアニメーション
- 前回の課題
- Timeline
終わりに

はじめに

この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです！
今回は前回に引き続きGreenSock社が開発したGreenSock Animation Platform(GSAP)を使い、前回作成したテキストアニメーションをTimelineを使いアニメーションの連結をしてみたいと思います。

前回の記事
参考
GSAPでテキストアニメーションをしてみたISSEN

注意

前回作成したものを応用するので、前回の記事をご覧になられていない方は拝見していただけると幸いです🙇‍♂️

対象読者

CSS/HTML等にアニメーション実装させたい方

gsap連続するアニメーション

前回の課題

まずは前回のコードの確認です。
HTML

<div class="background-color">
  <div class="text-area">
    <h1 class="text">CREATE PLAY ENJOY</h1>
    <p class="text">作って、遊んで、楽しむ</p>
    <h1 class="title">
      <span>T</span>
      <span>O</span>
      <span>K</span>
      <span>O</span>
      <span>S</span>
      <span>&nbsp</span>
      <span>i</span>
      <span>n</span>
      <span>c</span>
      <span>.</span>
    </h1>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.text-area {
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 50px;
  margin: 0;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.background-color {
  width: 100%;
  height: 100vh;
  background-color: black;
  opacity: 0;
  position: relative;
}

.text {
  opacity: 0;
  transform: translateY(20px);
  color: #ffffff;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title span {
  opacity: 0;
  color: #ffffff;
}

GSAP

//1.5秒かけ黒色背景を表示
gsap.to(".background-color", {
  duration: 1, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
});

//.textを1.5秒かけ出現させ1.5秒かけ逆再生させ初期状態に戻す
gsap.to(".text", {
  delay: 1, //アニメーションの初期遅延（アニメーションが開始されるまでの指定）
  duration: 1, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  y: "0px", //cssでY軸-20pxから完了時0pxへの指定
  yoyo: true, //trueにすることで上記で指定したY軸の動きの逆再生
  repeat: 1, //yoyoのリピート回数
  //同じclass名のバリデーションの設定
  stagger: {
    each: 0.5, //ディレイ時間
  },
});

//初期遅延3.5秒かけてから.titleを表示
gsap.to(".title span", {
  delay: 3.5, //アニメーションの初期遅延（アニメーションが開始されるまでの指定）
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  //同じclass名のバリデーションの設定
  stagger: {
    each: 0.2, //ディレイ時間
    from: "start", //出現方法の指定
  },
});

前回gsap.toメソッドを使いアニメーションを実装させました。
背景のアニメーションが終わってから、テキストアニメーションを行うというものでした、delayプロパティーを使い１つ１つのアニメーションに初期遅延を入れアニメーションを実装しました。
ですが上記のdelayを設けアニメーションを個別で動かそうとすると最初に行われる背景のアニメーションのdurationが仮に10秒になってしまったら、設定しているdelayの秒数が合わなくアニメーションが崩れてしまいます。
なので連続するアニメーションの場合は個別のアニメーションを使うのは好ましくはありません、連続するアニメーションの場合はTimelineを使うのが好ましいです。

Timeline

上記でも説明した通りアニメーション１つ１つにdelay時間を設けアニメーションを連続させるのはナンセンスです。
Timelineを使えば連続処理を行うことが可能です。
Timelineを使った書き方は下記になります。


// Timeline使用時

//1.5秒かけ黒色背景を表示
const tl = gsap.timeline();

tl.to(".background-color", {
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
})
//.textを1.5秒かけ出現させ1.5秒かけ逆再生させ初期状態に戻す
.to(".text", {
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  y: "0px", //cssでY軸-20pxから完了時0pxへの指定
  yoyo: true, //trueにすることで上記で指定したY軸の動きの逆再生
  repeat: 1, //yoyoのリピート回数
  //同じclass名のバリデーションの設定
  stagger: {
    each: 0.5, //ディレイ時間
  },
})
//1.5秒かけtitleを表示
.to(".title span", {
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  //同じclass名のバリデーションの設定
  stagger: {
    each: 0.2, //ディレイ時間
    from: "start", //出現方法の指定
  },
});

このようになります。
Timelineを使用すると上の処理が終わると処理が開始されるようになります。
ですので、delayを設定せずに連続するアニメーションを行うことが可能になります。

またTimelineを使用していても処理させる時間やラベルを指定することが可能になり、より複雑な処理が可能となります。
気になる方は下記参照してみてください。
オフィシャルサイト
参考
GreenSockTimeline