• HOME
  • 記事一覧
  • GSAPでテキストを下から上にアニメーションする方法

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

コーディング
記事を書いた人 : ヨシオカ レオ
デザイン・カメラ・スノーボードを愛しています。美容師→SE→デザイナー→海外留学→GLUTを立ち上げ!Webデザイナーに役立つ記事を執筆してます。

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

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

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

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)

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

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

この記事を共有する

Facebook Twitter Line

関連記事