GSAPアニメーション一覧｜Webサイトで使える演出10選をデモ付きで紹介
GSAP とは、Webサイトに高度なアニメーションを実装できるJavaScriptライブラリです。
GSAPを使うことで、
- スクロール連動アニメーション
- パララックス（視差効果）
- テキストアニメーション
- 水平スクロール
- SVGアニメーション
など、さまざまな演出を実装することができます。
しかし、具体的にどのようなアニメーションが作れるのかと疑問に思っている方も多いのではないでしょうか。
そこで今回の記事では、GSAPで実装できる代表的なアニメーション10選を紹介します。
実際のWebサイトでよく使われる演出を中心に、Web制作者の視点から、取り入れやすいものをピックアップしました。
各演出にはデモを掲載しているため、実際の動きを確認しながら、サイト制作やアニメーション実装の参考にしてみてください。
1. フェードインアニメーション
まずは基本的なアニメーションからご紹介します。
要素が画面内に入ると、下からふわっとフェードインするアニメーションです。
多くのWebサイトで使用されているアニメーションですね。
今回のデモはシンプルに下からフェードインですが、左右からフェードインしたり、サイズ徐々に大きくなりがら現れたりなど、さまざまな演出が可能です。
2. 数字のカウントアップ
次は、数字のカウントアップアニメーションです。
要素が画面内に入ると、数字が0から目標値までカウントアップします。
実績紹介やサービスの強みを数字で伝える場面でよく使われる演出です。
3. テキスト分割アニメーション
次はテキスト分割アニメーションです。
テキストを一文字ずつ分割して、それぞれが様々な方法で出現するアニメーションです。
画面内に入ると文字が最後まで表示されるパターンと、スクロールに合わせて一文字ずつ出現するパターンを作成しました。
4. 水平スクロール
次は水平スクロールのアニメーションです。
通常、ページをスクロールすると縦方向に移動しますが、水平スクロールを実装することで、横方向に移動することができます。
画像ギャラリーや、年表などでよく見かける演出ですね。単調な縦スクロールに変化をつけたい時におすすめです。
5. スクロール進捗バー
続いては、ページ内のスクロール進捗を可視化するアニメーションです。
ページ内をスクロールすると、上部にスクロール進捗バーが表示され、どのくらいスクロールされたかがわかります。
6. スクロール連動マーキー
次はスクロール連動マーキーです。
スクロールの方向によって、マーキー要素が流れる向きが変わるアニメーションです。
モダンなWebサイトの装飾でよく見かける演出ですね。
7. SVGアニメーション
次はSVGアニメーションです。
SVGのパーツをそれぞれアニメーションさせたり、DrawSVGPluginを使って、線を描画したりすることができます。
他にも様々なSVGプラグインが用意されているので、気になる方は 公式ドキュメント をチェックしてみてください。
8. パララックス
次は、パララックス（視差効果）のアニメーションです。
パララックスは、スクロールに合わせて背景や装飾要素を異なる速度で動かすアニメーションです。
要素ごとに動くスピードを変えることで奥行きが生まれ、ページ全体に立体感のある印象を加えることができます。
こちらのデモでは、背景の装飾要素と画像が、スクロールに合わせて上下に移動するアニメーションを実装しています。
以下のデモでは、複数レイヤーが別々の速度で動くパララックスを実装していますので、こちらもぜひご覧ください。
9. セクション固定スクロール
次は、セクション固定スクロールのアニメーションです。
スクロール中に画面を固定し、テキストや画像などのコンテンツのみが切り替わる演出です。
10. マウスカーソル追従
最後は、マウスカーソル追従のアニメーションです。
マウスの動きに合わせて、カスタムカーソルが滑らかに追従します。
マウスカーソルを当てる要素によって、異なる絵文字が表示されるカーソルを実装しました。
こちらのアニメーションはモバイル端末では確認できませんので、PCでご確認ください。
まとめ
今回は、GSAPで実装できるWebアニメーションを10個紹介しました。
フェードインのようなシンプルな演出から、水平スクロールなどのスクロール連動の演出など、Webサイトにさまざまな動きを加えることができます。
さらに応用的なGSAPアニメーションを見たい方は、コードハイブの GSAPアニメーションデモ一覧 もあわせてご覧ください。スクロール連動やスライダー、パララックスなど、実際のWebサイトで使える演出デモを掲載しています。
GSAPアニメーション実装ならコードハイブへ
コードハイブでは、GSAPを使ったアニメーション実装や、Webサイトの印象を高める動きのある表現にも対応しています。
「デザインに動きを加えたい」「スクロール連動の演出を実装したい」「アニメーション部分だけ依頼したい」といった場合は、お気軽にご相談ください。