BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

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()