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

<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>

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;
}

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

// 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", //出現方法の指定
    },
  })