GSAPでテキストを下から上にアニメーションする方法

こんにちは！GLUTのレオです。

テキストや画像をアニメーションする方法はjQueryやCSSで制御したり色々な方法がありますが今日はGSAPでテキストを簡単にアニメーションさせる方法について書いていきたいと思います。

今回は詳しいGSAPの解説は省きますが動きとしてはこんな感じで下から上に動くようなアニメーションを作る事が出来ます。

1 GSAP(Tween MAX)CDN

GSAP(Tween MAX)CDN

TweenMAXを使う方法は色々あるのですが今回はすぐに実装できるCDNを使用します。

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

上のコードをbodyの直前に貼り付けてください。

HTML

<section>
      <h1><span class="hidetext">text1</span></h1>
      <h1><span class="hidetext">text2</span></h1>
      <h1><span class="hidetext">text3</span></h1>
</section>

CSS

h1{
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  font-size: 200px;
  height: 250px;
  margin:0;
  color: FFF;
}

.hidetext{
  position: absolute;
  z-index: 1;
}

JS

tl = new TimelineMax ({});
tl.staggerFrom('.hidetext', 1.5, {y:"100%", ease:Power4.easeOut}, 1.5)

たったこれだけのコードでいい感じになりました！

最低限のコードで済ませているのでご自身の環境にあわせて使ってみてくださいね。

GSAP(Tween MAX)CDN

HTML

CSS

JS

この記事を共有する

関連記事

よく読まれている記事

GLUT