【GSAP】コピペOK!GSAPカーテンテキストアニメーション
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform（GSAP）を使い、カーテンテキストアニメーションを実装していきたいと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください。
【初学者向け】GSAPでテキストアニメーションをやってみた！！
この記事では、GreenSock社が開発したGreenSock Animation Platform(GSAP)を使いテキストアニメーションを学ぶことができます。 基本的な使い方から学び、実際にテキストアニメーションを実装する方法を紹介しています。
対象読者
- Web制作でアニメーションの実装をしたい方
今回の完成予定
今回はGSAPを用いてカーテンアニメーションを実装してみたいと思います。
GSAPを使うと簡単に実装できるので、ぜひお試しください。
今回はHTML&CSSからGSAPまで手順を分けて解説していきたいと思います。
GSAPの導入
GSAPを利用するには、公式サイトからダウンロードするか、CDNでも提供されているので公式サイトを参照してください。
今回はCDNを利用していきたいと思います。
Homepage
Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.
greensock.comコードの紹介
<body>
<p class="text">
<span class="text__word">Hello World</span>
<span class="text__bg"></span>
</p>
</body>body {
/*全体レイアウトのための記述*/
min-height: 100vh;
background-color: #333;
color: #353535;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 40px;
color: #fff;
position: relative;
}
.text__bg {
display: block;
width: 100%;
height: 72px;
position: absolute;
left: 0;
top: 0;
z-index: 100;
background-color: #fff;
}今回のアニメーションを実現するためには.text__bgクラスが重要になります。
このオブジェクトを操作し実現することになります。
テキストに対し背景色白のオブジェクトが覆いかぶさっていると思います。
下記のようになっていれば大丈夫です。
アニメーションを意識したプロパティの追加
先程も少し説明しましたが、今回は.text__bgクラスが重要になります。
実現したいアニメーションをもう一度確認すると、.text__bgが左方向から右方向に伸びてから左に戻るときにテキストが出現するアニメーションになっていると思います。
それを踏まえ今回はto()メソッドを使用するのでアニメーション開始前の状態を追記します。
body {
/*全体レイアウトのための記述*/
min-height: 100vh;
background-color: #333;
color: #353535;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 40px;
color: #fff;
position: relative;
}
.text__bg {
display: block;
width: 100%;
height: 72px;
position: absolute;
left: 0;
top: 0;
z-index: 100;
background-color: #fff;
transform-origin: left;
transform: scaleX(0);
}
.text__word {
opacity: 0;
}今回は.text__bgが右方向に伸びるのをtransform: scaleXで実現しようと思います。
transform: scaleXだけでは伸びる方向が指定できないので、transform-origin: leftで中心点を左にし左から右に伸びるように指定しています。
またテキストのopacityを0にして消しています。
この状態でブラウザを確認すると何も写っていないと思います。
ここからto()メソッドを使用して完成させていきたいと思います。
GSAPの記述
今回のアニメーションさせる手順として3ステップあります。
- 左から右に白色背景のオブジェクトを伸ばす
- テキストの表示
- 右から左に白色背景のオブジェクトを縮める
これを順に行っていきたいので、Timelineメソッドを使用して実装していきたいと思います。
まだTimelineメソッドの使用方法がわからない方は下記を参照してください。
【初学者向け】GSAP Timelineを使ってみた!!!
GSAPのTimelineを使用して、複数のアニメーションを連続実行する方法を解説します。delayを使わずにアニメーションを連結できる便利な機能です。
const tl = gsap.timeline({ delay: 1 })
const firstBg = document.querySelectorAll(".text__bg")
const word = document.querySelectorAll(".text__word")
tl.to(firstBg, {
scaleX: 1,
duration: 0.4,
ease: Power2.easeOut,
})
.to(
word,
{
opacity: 1,
duration: 0.1,
},
"-=0.1",
)
.to(firstBg, {
scaleX: 0,
duration: 0.4,
ease: Power2.easeOut,
})Timelineメソッドを用いて1つずつのアニメーションを連結し、実現しています。
scaleXを1にしてからテキストのopacityを1にして表示し、最後またscaleXを0にして元に戻すようにしています。
Timelineメソッドで連続してアニメーションを行う際はdurationで一つずつのアニメーション時間を調整することも重要です。
時間の制御がうまくできていないと見栄えがかなり悪くなります。
またアニメーションのイージングを設定することにより印象も変わってくると思います。
イージングを詳しく知りたい方は下記を参照してみてください。
これにて完成になります。
【GSAP】テキストアニメーションにイージング全種類で比較してみた!
GSAPのイージング全15種類をテキストアニメーションで比較検証。Power0〜4、Back、Elastic、Bounceなど各イージングの動きの違いをCodePenデモで確認できます。
おまけ
右から左に伸ばしたいときはtransform-origin: rightにしてください。
body {
/*全体レイアウトのための記述*/
min-height: 100vh;
background-color: #333;
color: #353535;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 40px;
color: #fff;
position: relative;
}
.text__bg {
display: block;
width: 100%;
height: 72px;
position: absolute;
left: 0;
top: 0;
z-index: 100;
background-color: #fff;
transform-origin: right;
transform: scaleX(0);
}
.text__word {
opacity: 0;
}さいごに
今回はGSAPを用いてカーテンテキストアニメーションを実装しました。
アニメーションの使い勝手もよく、簡単に実装できるのでどんどん使っていこうと思いました。
イージングやアニメーション時間で印象もかなり変わってくるので、状況に応じて変更していこうと思いました。
この記事を書いた人
