ISSEN 
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)を使い、テキストアニメーションを実装していきたいと思います。GSAPの基本的な使い方は下記の記事を参考にしてください!!!
【初学者向け】GSAPでテキストアニメーションをやってみた！！
対象読者
- web制作でアニメーションの実装をしたい方
今回の完成予定
今回作成するテキストアニメーションは汎用性の高いテキストアニメーションをイメージし作成しました。
コーポレートサイトや少しクリエイティブよりなサイト等でも使用できるのかなーと思っております。
実装自体もかなり簡単になるので是非参考にしてみてください。
また今回テキストアニメーションをするのに便利なライブラリも使用しますので是非参考にしてください！
今回はHTML&CSSからGSAPまで手順を分け解説していきたいと思います。
GSAPの導入
GSAPを利用するには、公式からダウンロードするか、CDNでも提供されているので公式HPを参照してください。
今回はCDNを利用していきたいと思います。
コードの紹介
では一つずつ分解して説明していきます。
レイアウトを整える
HTML
<header>
<h1 id="text">PLAY TO ENJOY</h1>
</header>CSS
/* reset.cssは省略 */
header {
/*下記はレイアウトを整えるものです*/
display: grid;
place-content: center;
height: 100vh;
background-color: #333;
}
h1 {
color: #fff; /*お好きなフォントカラーを選んでください*/
font-size: 80px; /*お好きなフォントサイズを選んでください*/
font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
}あまり説明することはありません。お好きなフォントとレイアウトにしちゃってください！
SplitTypeの導入
今回JSライブラリのSplitTypeを使用したいと思います。
一文字ずつずれるテキストアニメーションを実装する際、テキストのズレを表現するのにHTMLをこのように書きませんか？
<h1 id="text">
<span>P</span>
<span>L</span>
<span>A</span>
<span>Y</span>
<span>T</span>
<span>O</span>
<span>E</span>
<span>N</span>
<span>J</span>
<span>O</span>
<span>Y</span>
</h1>テキストが長い時やアニメーションさせる量が多い時などめんどくさいですよね、またコードの見通しも悪くなります。
そこで使用するのがSplitTypeです！
SplitType は、行、単語、および文字を個別にアニメーション化できるように、HTML テキストを要素に分割する小さな JavaScript ライブラリです。これは GSAP の SplitText プラグインに触発されたもので、任意のアニメーション ライブラリで使用できます。
言葉で説明しても分かりづらいと思いますので実際にやっていきたいと思います。
CDNで読み込んで行きたいと思います。
<script src="https://unpkg.com/split-type"></script>読み込み終わったら、テキストを分割していきたいと思います。
コードの書き方は下記になります。
const text = new SplitType('#hoge')
// または
const text = SplitType.create('#hoge')今回は定数textとしid＝”text”を分割しています。
const text = new SplitType("#text");これでテキストが分割されていると思いますので確認してみましょう!
このように指定した要素がインラインブロック要素になって分割されていることがわかると思います！
アニメーション用のCSSの追記
今回はテキストが下から上に一文字ずつ遅れて出現するのでテキストを表示させる場所より下に移動させます。
.char {
transform: translateY(100px);
transition: transfrom 0.5s;
}これで真ん中より100px下にスタンバイ完了です。
更に下にあるときは表示を隠しておきたいので、clip-pathでマスクしておきます。
またお好みですが個人的にはline-heightをなくしたほうがかっこよいなと感じます。
h1 {
color: #fff; /*お好きなフォントカラーを選んでください*/
font-size: 80px; /*お好きなフォントサイズを選んでください*/
font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
line-height: 1;/*line-heightなくしたほうがカッコ良くなります*/
}ブラウザを見てみると何も写っていないと思います。
これでアニメーションの開始前スタンバイ状態の完了です！
GSAPを使用する
いよいよここからGSAPの登場です。
今回CSS側でアニメーションのスタンバイ状態を作っているので、gsap.toメソッドを使用しようと思います。
基本的な説明は下記を参考にして下ください。
【初学者向け】GSAPでテキストアニメーションをやってみた！！
gsap.to(".char", {
y: 0 /*テキストのY軸の操作*/,
stagger: 0.05 /*テキスト間の遅延時間*/,
delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
duration: 0.5 /*アニメーションの時間*/,
ease: power2.out /*イージングの設定*/,
});gsap.toメソッドを使用しているので、Y軸を完了の位置を指定しています。この場合CSS側でしたtransform: translateY(100px);からtransform: translateY(0px);にするような指定になります。
staggerは同じクラスに対し連続で動かすことができる機能になります。
詳しくは下記を参照してください。
またいつも通りですが、イージングはお好きに選んでください！
イージングの指定方法は下記を参照してください！
【GSAP】Timelineを使ったオープニングアニメーション
おまけ
テキストを上から下に出したい場合はY軸をマイナスにしてください！
.char {
transform: translateY(-100px);
}そうすると上から出すことが出来ます。
コードのまとめ
HTML
<header>
<h1 id="text">PLAY TO ENJOY</h1>
</header>CSS
/* reset.cssは省略 */
header {
/*下記はレイアウトを整えるものです*/
display: grid;
place-content: center;
height: 100vh;
background-color: #333;
}
h1 {
color: #fff; /*お好きなフォントカラーを選んでください*/
font-size: 80px; /*お好きなフォントサイズを選んでください*/
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: transfrom 0.5s;
/* transform: translateY(-100px); テキストを上から出したい時*/
}JavaScript
const text = new SplitType("#text");/*テキストの分割*/
gsap.to(".char", {
y: 0 /*テキストのY軸の操作*/,
stagger: 0.05 /*テキスト間の遅延時間*/,
delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
duration: 0.5 /*アニメーションの時間*/,
ease: power2.out /*イージングの設定*/,
});
さいごに
今回は汎用性の高いテキストアニメーションを紹介しました。
SplitTypeを紹介しましたがGSAPと親和性が高いだけあってかなり使いやすいのでは無いでしょうか？
やはりGSAPはとても簡単にアニメーションの実装ができるなと感じました！
