【GSAP】コピペでOK!!GSAPテキストアニメーションの実装
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)を使い、テキストアニメーションを実装していきたいと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください！
【初学者向け】GSAPでテキストアニメーションをやってみた！！
この記事では、GreenSock社が開発したGreenSock Animation Platform(GSAP)を使いテキストアニメーションを学ぶことができます。 基本的な使い方から学び、実際にテキストアニメーションを実装する方法を紹介しています。
対象読者
- Web制作でアニメーションの実装をしたい方
今回の完成予定
今回作成するテキストアニメーションは汎用性の高いテキストアニメーションをイメージし作成しました。
コーポレートサイトや少しクリエイティブよりなサイト等でも使用できるのかなーと思っております。
実装自体もかなり簡単になるので是非参考にしてみてください。
また今回テキストアニメーションをするのに便利なライブラリも使用しますので是非参考にしてください！
今回はHTML&CSSからGSAPまで手順を分け解説していきたいと思います。
GSAPの導入
GSAPを利用するには、公式からダウンロードするか、CDNでも提供されているので公式HPを参照してください。
今回はCDNを利用していきたいと思います。
Homepage
Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.
greensock.comコードの紹介
では1つずつ分解して説明していきます。
レイアウトを整える
<header>
<h1 id="text">PLAY TO ENJOY</h1>
</header>/* 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です！
https://www.npmjs.com/package/split-type
www.npmjs.comSplitType説明文和訳(一部抜粋)
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);
}これで真ん中より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.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は同じクラスに対し連続で動かすことができる機能になります。
詳しくは下記を参照してください。
Staggers | GSAP | Docs & Learning
If you haven't tried creating staggered animations in GSAP yet, you're in for a treat - Staggers are totally configurable and SUPER powerful. If a tween has multiple targets, you can easily add some delay between the start of each animation:
gsap.comまたいつも通りですが、イージングはお好きに選んでください！
イージングの指定方法は下記を参照してください！
Easing | GSAP | Docs & Learning
Easing is the primary way to change the timing of your tweens. Simply changing the ease can adjust the entire feel and personality of your animation. There are infinite eases that you can use in GSAP so we created the visualizer below to help you choose exactly the type of easing that you need.
gsap.comおまけ
テキストを上から下に出したい場合はY軸をマイナスにしてください！
.char {
transform: translateY(-100px);
}そうすると上から出すことが出来ます。
コードのまとめ
<header>
<h1 id="text">PLAY TO ENJOY</h1>
</header>/* 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);
/* transform: translateY(-100px); テキストを上から出したい時*/
}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はとても簡単にアニメーションの実装ができるなと感じました！
この記事を書いた人
