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

// 本記事のベースとなるv2の記法
gsap.to("#text", { ease: Power1.easeOut })
 
// v3で推奨される文字列記法
gsap.to("#text", { ease: "power1.out" })

// v3の記法
gsap.to("#text", { ease: "elastic.out(1, 0.3)" })
 
// v2の記法（v3でも動作します）
gsap.to("#text", { ease: Elastic.easeOut.config(1, 0.3) })

<header>
  <div class="ease-name">
    <span>easeIn</span>
    <h1 id="ease-in">PLAY TO ENJOY</h1>
  </div>
  <div class="ease-name">
    <span>easeInOut</span>
    <h1 id="ease-in-out">PLAY TO ENJOY</h1>
  </div>
  <div class="ease-name">
    <span>easeOut</span>
    <h1 id="ease-out">PLAY TO ENJOY</h1>
  </div>
</header>

header {
  /*下記はレイアウトを整えるものです*/
  display: grid;
  place-content: center;
  height: 100vh;
  background-color: #333;
}
 
h1 {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 20px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1; /*line-heightなくしたほうがカッコ良くなります*/
}
 
.char {
  transform: translateY(100px);
  transition: transform 0.5s;
  /* transform: translateY(-100px); テキストを上から出したい時*/
}
 
#ease-in,
#ease-in-out {
  margin-bottom: 20px;
}
 
div span {
  color: #fff;
  font-size: 16px;
}

const easeIn = new SplitType("#ease-in") /*テキストの分割*/
const easeInChar = document.querySelectorAll("#ease-in .char") /*#ease-inの.charの取得*/
const easeInOut = new SplitType("#ease-in-out") /*テキストの分割*/
const easeInOutChar = document.querySelectorAll("#ease-in-out .char") /*#ease-in-outの.charの取得*/
const easeOut = new SplitType("#ease-out") /*テキストの分割*/
const easeOutChar = document.querySelectorAll("#ease-out .char") /*#ease-outの.charの取得*/
 
gsap.to(easeInChar, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
})
 
gsap.to(easeInOutChar, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
})
 
gsap.to(easeOutChar, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
})

const char = document.querySelectorAll("#hoge .char") /*#hogeの.charの取得*/

const word = document.querySelectorAll("#hoge .word") /*#hogeの.wordの取得*/