BLOG

GSAPを使って複雑なオープニングアニメーションを作ってみよう

更新日:2022/05/18

GSAPを使って複雑なオープニングアニメーションを作ってみよう

アニメーション。
それはWEBサイトには欠かせない演出です。
最近のWEBサイトはアニメーションがかなり複雑になってきている印象です。

ただ、アニメーションって結構難しいですよね。
簡単なアニメーションならcssでちょちょっと書けばできますが、いくつものアニメーションが連動しているものになってくると難易度があがります。

とはいえ、そんな複雑なアニメーションでも、GSAPを使えばわりと簡単にできちゃいます。

この記事で実装する完成デモ

この記事で実装するアニメーションの完成デモページは以下になります。

デモページを見る

結構複雑そうですよね。
でも、GSAPを使えば簡単に実装できます!

GSAPとは?

GSAPとはアニメーションを実装するために特化したライブラリです。
公式サイト

GSAPには2つのライセンスがあります。
1つは「Standard License」。
もう1つが「Business License」です。

実はこのライブラリは、ある特定の条件で使用する場合に、有料の「Business Green」というものに会員登録しないといけません。

その条件は、ざっくりいうと、「そのサイトを利用するために、エンドユーザーがお金を払わないといけない場合」です。
例えば、ネットフリックスを利用するためには、毎月お金を払わないといけませんよね。
そういったサイトで使用する場合は、会員登録が必要です。

なので、通常のWEBサイト(弊社のようなWEBサイト)であれば、無料で使用することができます。

もし、あなたが利用しようとしている際にどのライセンスが必要か判断できなければ、以下の公式サイトをご覧ください。

ライセンスについて詳しく見る

上記サイトの、以下赤線で簡単な質問に答えるだけで通常のライセンスなのか、有料なのかがわかったりします。
GSAPとは?

さっそくアニメーションを作ってみよう!

改めて、この記事で実装するアニメーションの完成デモページをご覧ください。

デモページを見る

これを作るために、まずはデザインデータを用意します。

デザインデータからSVGを書き出す

まずはデザイデータを適当に用意します。

※皆さんも適当にデザインツールを利用して作成してみてください。
ちなみに、以下のデザインはFigmaで作成しています。
デザインデータからSVGを書き出す

丸い図形を1つずつアニメーションで動かしたいので、1つ1つdivなどで作成して、それぞれをabsoluteで配置しなきゃいけないのかなと思いますが、実はもっと簡単に実装する方法があります。

その方法は、丸い図形をすべてグループ化し、SVGとして書き出して、absoluteで配置します。

なぜSVGかというと、このあとの工程でどうしてもSVGじゃないといけないからです。

書き出したSVGデータをIllustlatorで開く

書き出したSVGをイラストレータで開き、レイヤーを個別にわけて再度SVGで書き出します。

レイヤーを個別に分ける方法ですが、以下の記事を参考に行います。
Illustrator 一瞬で各要素を別々のレイヤーに分ける方法

また、書き出す際には以下の記事の「2.SVGを書き出す」を参考に書き出しを行います。
自由な形でリンク範囲を作る方法2つ クリッカブルマップ・SVGリンク【実装サンプル付き】

無事、書き出しが完了したら、SVGファイルをVsCodeなどのエディタで開いてみてください。

以下は今回のデモサイトのSVGデータです。

ソースの表示

これをHTMLに貼りつけて、absoluteで配置すれば、位置関係はデザイン通りになり、1つずつabsoluteで配置する必要がなくなります。
また、レスポンシブの際にも、各々の丸い図形同士の位置関係はそのままで、拡大縮小が行われてます。

かなり楽ちんですね笑

貼りつけたsvgのコードはHTMLなので、要素1つ1つをCSSで調整できます

また、JavaScriptで操作することもできます

ここで、貼り付けたsvgデータを見てみましょう。

以下のようなHTMLがありますね。

Illustlatorでレイヤーを分離したときに、各レイヤーに名前を付けることができ、その際に付けた名前がid名に表示されています。

また、これはHTMLなので試しにこのgタグの塊ごと削除すると、ブラウザ上でもこのgタグに相当する丸い図形が消えますので確認してみてください。

このように、SVGをグループとして書き出してabsoluteで配置するとcssがかなり楽ちんです★
ただ、デメリットもあります。
それは、HTMLが汚く見えることですね。。

もしどうしてもそれが嫌な場合は、頑張って1つ1つをabsoluteで配置し、レスポンシブを考慮して頑張るしかないです笑

GSAPを導入する

丸い図形の準備と、その他テキストの準備、スタイル調整が完了したら、いよいよGSAPを導入していきます。

GSAPの導入方法はいくつかあります。

公式サイトに行くと、以下の赤枠の「Get GSAP」があります。
そこにいくつか導入方法が記載されています。
GSAPを導入する

今回は手軽に試したいので、CDNをつかってみます。

headタグもしくはbody閉じタグでCDN読み込みの記述を書きましょう。

▼headタグに書く場合

▼body閉じタグ直前で書く場合

headタグにscriptファイル読み込みの記述を記述する場合は、deferを付けましょう。

こうすることで、HTMLパースが完了した後に、このファイルが読み込まれるので、レンダリングブロックが回避できサイトパフォーマンス的に良いとされています。
■参考記事
scriptタグに async / defer を付けた場合のタイミング

つづいて、GSAPを利用してアニメーションの記述をするためのjsファイルを用意しましょう。

今回私は、プロジェクトフォルダ内に、jsフォルダを作成し、その中にscript.jsという名前で作成してみました。

script.jsをindex.htmlで読み込みます。

▼headタグに書く場合(deferを付けることを忘れずに!)

▼body閉じタグで読み込む場合

GSAPをつかってアニメーションさせる前に。

準備が整ったのでいよいよアニメーションさせていきたいところですが、このアニメーションがどのようになっているのかざっくり解説します。

このアニメーションは以下のような動きが一連になっています。

No.1 ドットが1つずつ落ちしてその後消えるアニメーション
ドットが1つずつ落ちしてその後消えるアニメーション

No.2 黒背景が上から下に移動して消えるアニメーション
黒背景が上から下に移動して消えるアニメーション

No.3 丸い図形が下からふわっと浮き上がってくるアニメーション
丸い図形が下からふわっと浮き上がってくるアニメーション

No.4 メインテキストが1文字ずつ下から浮き上がってくるアニメーション
メインの文字が1文字ずつ下から浮き上がってくるアニメーション

No.5 サブテキストが下から浮き上がってくるアニメーション
と、
No.6 ヘッダーが上から下に移動して表示されるアニメーション
※No.5と6の2つのアニメーションはほぼ同時に発動しています。
サブテキストが下から浮き上がってくるアニメーションと、ヘッダーが上から下に移動して表示されるアニメーション

これら1つ1つのアニメーションをGSAPを使用して作成しますが、とても簡単にできます。

1つ1つのアニメーションを作成したうえで、それらをどのタイミングで発動させるかを、GSAPのタイムラインというものを使用して自由にいじっていくわけです。

★ポイント

1つ1つのアニメーションを作成し、それらのアニメーションをタイムラインを使って連携させる 

スタイル(css)について解説

CSSについて、アニメーションに関係する部分だけ一部抜粋して解説します。
※remで指定していますが、pxでも問題ありません。

▼黒背景(カーテン)

これは「No.2 黒背景が上から下に移動して消えるアニメーション」で使用する黒背景です。

ご覧の通り、fixedで#000のdivを配置しています。

display:gridplace-items:centerは、div.c-loader-bgの直下にあるdiv.c-loader-dotを、黒背景の上下左右中央に配置するためです。

▼ドット

これは「No.1 ドットが1つずつ落ちしてその後消えるアニメーション」で使用するドットです。

ドット間の余白をmarginで取っています。

Flexにgapプロパティというものがあり、そちらを使うとより簡単に書くことができます。

以下のような感じですね。

ただ、このgapプロパティはSafariの14.1からしか使えません。
Can I useを見る

Safari14.1は、iOSのバージョンでいうと、14.5です。

iOS13では使えないので、案件でiOS13までカバーしなければいけない場合は使用しないようにしましょう。

iOS13は、日本で1.692%のシェアがあります。(2022年3月31日現在)

まあまあ無視できない数字だと思うのでまだFlexのgapはまだ使えなそうですね。

▼参考ソース
スマタブ info

ちなみに、Gridにもgapプロパティがあり、そちらは問題なく使えます!

Flexのgapは様子見ですが、Gridなら使ってOKと言えるでしょう!

詳しくは、Can i useで調べてみてください!

これ以外のCSSについては特に説明することがありません。

JavaScriptのことは気にせず、いったん普通にコーディングすればOKですね!

HTML⇒CSS⇒最後にJavaScript(GSAP)といった感じでコーディングするとスムーズです!

GSAPを使う時に抑えるべき3つの機能

GSAPの導入が済み、この記事で扱うアニメーションの仕組みがわかったところで、いよいよGSAPを使います!

GSAPにはさまざまな機能があります。

正直たくさんありすぎて覚えられません。

そのため、この記事で扱うアニメーションを実装するために欠かせない機能のみ紹介します。

とりあえず覚えてほしい基本的な記述方法は以下です。

①要素の状態をセットするgsap.set()

▶公式ドキュメント: gsap.set()

xやyを指定できますが、これはcssのtransformプロパティのtranslateXとtranslateYと同じ意味です。

xがプラスの方向は、今あなたがみているブラウザの方向。

yがプラスの方向は、今あなたがみているブラウザの方向です。

なので、y:30とした場合、要素は画面の下方向に30px移動した位置に移動します。

②要素をある状態に変化させるgsap.to()

▶公式ドキュメント: gsap.to()

これはアニメーション完了後の状態を指定するためのメソッドですね。
だいたい上記のコメントを読んでいただくとわかるのでご確認ください。

これ以外にも、gsap.from()やgsap.fromTo()というメソッドもあります。

③タイムライン上で各アニメーションを連動させるgsap.timeline()

▶公式ドキュメント: gsap.timeline()

このタイムライン(timeline)がめちゃくちゃ強力な機能です。

各アニメーションは.to(…).to(…).to(…)という感じで、つなげていき連携させることができます。

また、上記のサンプルを見てわかるように、‘-=0.2’ などと書くことで、1つ1つのアニメーションの動作タイミングを細かく設定できます。

tl.toの中身の書き方は見ての通り、gsap.toでの書き方とほぼ同じです。

この3つが使えるようになればとりあえずはOKです!

公式ドキュメントは英語ですが、DeepLなどで翻訳してみてください。

ただ、公式ドキュメントは情報量が多いので、なんとなく使い方を知って、その後ドキュメントを読むほうが分かりやすい気がします。

以下は公式サイトが出しているGSAPのチートシートです。

これを見ると、「なんとなくこう書けばいいのか」がわかるので、参考にしてみてください。

▼GSAPチートシート
GSAPチートシート

GSAPを書いてアニメーションを実装してみよう

抑えるべき基本的な3つの機能がわかったところで、この記事で扱うデモページのアニメーションを実装してみましょう。

結論

まずは完成コードを以下に記載します。
(※JavaScriptのみ記載しています。)

コメント部分を読んでいただければなんとなくわかりますが、詳細について次で解説します。

解説

ここからはJavaScriptのコードについてザックリ解説していきます。

文字列を分割しspanで囲む

これは以下の赤枠の文字を1文字ずつ分割してspanタグで囲む処理を行っています。
文字列を分割しspanで囲む

扱いやすいやすいように変数に格納

このあと、gsap.toやgsap.setを使用しますが、その際に指定するセレクタの文字列を予め変数として用意しておきます。

アニメーション前の初期状態をセットする

gsap.setを用いて、アニメーション実行前の初期状態をセットします。

もう一度復習ですが、gsap.setの書き方は以下です。

setの第一引数は、テキスト、配列、オブジェクトのいずれかを指定できます。

そのため、複数要素に対して同じ初期状態をsetする場合は、配列で一括で指定するといいでしょう。

具体的には、以下のように書くことができます。

この書き方を、以下で記述しています。

これもまた繰り返しになりますが、yのプラス方向は今あなたが見てるブラウザの方向です。

そのため、y:30とは下方向に30px移動した位置ということです。

つまりここで指定している内容の意味は、jsBubbleとjsTextとjsLeadTextのそれぞれのアニメーション実行前の初期状態を、opacity:0で消えた状態にして、下方向に30px移動した位置にするという意味になります。

タイムラインを作成し、各アニメーションを実行する

まずはtimelineを作成します。

次に、タイムライン上で各アニメーションを実行します。

まずはドットのアニメーションからです。

アニメーションがスタートしてから0.8秒後にドットのアニメーションが始まります。

初期状態はopacity:0で、yマイナス方向に50pxの位置にありました。

それを、opaciy:1に戻し、yの位置も元に戻しています。

ここで1つポイントがあります。
それはstaggerプロパティです。

これを指定することで、複数の要素を順番にアニメーションさせることができます。

ここでは、ドットの役目をはたしているspanを左から順番に0.5秒おきにアニメーションさせています。

easeプロパティは、以下の公式ドキュメントを参考にしてみてください。

自分好みのイージングを作成することもできますし、用意されているイージングを指定することもできます。

今回はもともと用意されているイージング(‘power4.inOut’)を指定しています。

イージングについて詳しく見る

この、ドットが上から落ちてくるアニメーションが完了したら、ドットを消す処理を行います。

それが以下ですね。

次に、カーテン(黒背景)を上から下に移動させるアニメーションを実行します。

y:100%とすることで、下方向にカーテン(黒背景)を移動させブラウザの外へ追い出しています。

ここでまたポイントがあります。

‘+=0.5’とすることで、前のアニメーション(ドットが消えるアニメーション)が終わってから0.5秒経過した後に、カーテン(黒背景)が移動するアニメーションが実行されるようにしています。

これは、以下のようにdelayを使って書いても同じ結果になりますのでどちらでもOKです。

バブル(丸い図形)をアニメーションさせる

カーテンのアニメーションが完了したらお次はバブルが下から上にそれぞれ移動しながらふわっと表示されるアニメーションです。

複数の要素を順番にアニメーションさせたいのでstaggerを使用しています。

また、カーテンアニメーションが完了してから0.2秒後にアニメーションを実行させたいので‘+=0.2’としています。

ドットのアニメーションと同じようなコードを書いているので、そろそろGSAPの書き方に慣れてきたのではないでしょうか。

メインビジュアルのタイトルを1文字ずつアニメーション

これについてはバブルのアニメーションとほぼ同じなので説明は割愛します。

リード文とヘッダーのアニメーション

それぞれいたってシンプルなアニメーションです。

ポイントは、ヘッダーのアニメーションの方に記載の‘<'です。

これを指定することで、前のアニメーションと同時にアニメーションを実行させることができます。

ソースコード一式を見る

最後に、この記事で実装したアニメーションのソースコードを記載します。
以下のコードは、cssやjsをhtmlファイルに直接書いていますが、実際にはファイルを分けて読み込んでください。

ソースの表示