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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

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