WebサイトにアニメーションをCSSやJSを使って自分でオリジナルで作成するのもよいですが、比較的簡単なアニメーションや内容が決まっているならライブラリを読み込んだほうがいいこともあります。
オリジナルで一つずつ作成するのも、CSSが最低限のもので済ませられる、サイトの雰囲気にあったものを作ることが出来る、などのメリットがあります。
一方ライブラリを使うと、こんなメリットがあります。
- コードの可読性が上がる
- アニメーションを個別で管理しなくて良くなる
- コードの行数が減る(読み込みが早くなる)
- 複雑なアニメーションが簡単に管理できる
この記事ではアニメーションを実装するのに代表的なライブラリを5つ紹介します。
ライブラリによって向き不向きがあり、使う内容によって変える必要があるので、それぞれの特徴を知って使っていきましょう。
- AOS
- Swiper
- animate.css
- GSAP
- Vivus.js
簡単なアニメーションなら AOSやanimate.css
カルーセルの管理ならSwiper
凝ったアニメーションを作る場合はGSAPがオススメです。
Vivus.jsは手書き風文字をアニメーションで動かすことが出来ます！
Webサイトアニメーションライブラリとは？
ライブラリとは、<head>内などで読み込んで、決まった形で呼び出すだけで使えるようにしたものです。
たくさんのアニメーションがつまったパッケージみたいなもの、とイメージするとわかりやすいです。
世の中には様々なライブラリがありますが、この記事ではアニメーション系の中でも、比較的使いやすくシンプルなものを紹介します。
私も実務で使っていたり、実装方法の参考にしたりしています。
ライブラリで使われている動きは、世の中のWebサイトでもよく使われているものばかりです。簡単に知っておくと、実装方法のイメージがついたり、よりモダンなアニメーションを実装できるようになります。
AIに丸投げするのもよいですが、可読性が上がったりコード量が減ったりと、ライブラリを使って実装する良さもあります。
AOS
Animate On Scroll の略で、スクロールアニメーションを簡単に実装することが出来ます。
スクロールアニメーションとは、Webサイトをスクロールすることによって画像がふわっと現れたり、スライドがシュッと現れたりするものです。
ユーザーのスクロールに合わせて発動するアニメーションのことですね。
自分で作るとjsとCSSを組み合わせる必要がありますが、ライブラリを使うことで簡単な指定だけで実装することが出来ます。
オススメの教材ドットインストールでも講義があり、使い方を覚えることが出来ます。
公式サイトをスクロールすると実際の動きを見ることが出来ます。実装方法は、ダウンロードしてフォルダに組み込むか、CDNで読み込んで実行する方法があります。
animate.css
CSSで実装できる、比較的簡易的なアニメーションのライブラリです。
要素がバウンドする、チカチカッと点滅する、ポヨンポヨンする、ちょっと分かりづらいかもしれませんが、そんな動きを実装できます。
サイト全体に影響を与えるものはありませんが、ボタンを動かしてみたり、注目してもらいたい画像を揺らしてみたり、面白い動きを実装することが出来ます。
実装方法は、ファイルをダウンロードして読み込むか、CDNを読み込むだけで簡単に取り込むことが出来ます。
使い方は、動かしたい要素に animate__animated animate__bounce のように2つのクラスを書くだけです。
→ animate__animated ＋ animate__種類 の2個セットが基本となります。
こちらのライブラリはCSSのみで動くもので、ページ読み込みと同時に全箇所が動きます。
スクロールと連動させたいときは、JSを組み合わせる必要があります。
Swiper
カルーセル(スライド)を管理するライブラリです。デイトラでもオススメのライブラリとして紹介されています。
テンプレートのHTML構造を使って、スライド要素を設定して動くように調整します。
swiper・swiper-wrapper・swiper-slideといったクラスと役割を覚える必要があるため、スライドを実装するには覚えることが多めです。
細かい調整をしないのであれば、Swiperライブラリ＋AIに投げてしまえば、
- 自動でカードが流れ続ける
- 画像を左右のボタンで動かす
といった内容でしたら実装可能です。
Vivus.js
Vivusは「SVGの線が手で描かれるように現れる」ちょっと変わったライブラリです。ロゴが描かれながら登場したり、サインを書いているような手書き文字を表現できます。
線画のSVGが必要で使う場面は限られますが、ハマると一気におしゃれになります。ロゴや手書き風イラストの登場演出にぴったりです。
公式サイト｜https://maxwellito.github.io/vivus/
GitHub｜https://github.com/maxwellito/vivus
デモ
また、ちょっとしたアニメーションであればこちらのジェネレーターを使うことで簡単に実装することが出来ます。
https://maxwellito.github.io/vivus-instant
GSAP
GSAPとは、JavaScriptを用いて実装するアニメーションのライブラリです。
ライブラリ自体が軽く、様々なブラウザに対応されており、いろんなWebサイトで取り入れられています。
サイト全体を巻き込むような凝ったアニメーションを作りたい時には、一番に候補になるライブラリですね。私も実務で取り入れています。
GSAPは連続したアニメーションを動かすのに向いていたり、canvasやWebGLを取り込んだアニメーションの利用も可能です。
なんでも出来るGSAPですが、ちょっとした動きやCSSだけで完結する動きを実装するのにはオーバースペックなため、ガッツリアニメーションを入れたい時以外は入れなくても大丈夫です。
ちなみに、2025年4月までは一部有料だったGSAPですが、Webflowに買収されて完全無償化になっています。ありがたいですね。
（出典：Webflow公式ブログ https://webflow.com/blog/gsap-becomes-free）
公式サイト｜https://gsap.com/
よくある質問
- ライブラリは複数同時に使ってもいいですか？
-
使えます。たとえば「スクロールアニメはAOS、スライダーはSwiper」のように、役割ごとに組み合わせるのは普通です。ただし読み込むほどページは重くなるので、必要なものだけに絞るのがおすすめです。
- CDNとダウンロード、どっちで読み込むのがいいですか？
-
まず試すならCDNが手軽でおすすめです。コードを数行貼るだけで使えます。本番運用で「表示速度を詰めたい」「外部サービスに依存したくない」という場合は、ファイルをダウンロードして自分のサーバーに置く方法が向いています。
- 初心者はどれから触ればいいですか？
-
AOSかanimate.cssがおすすめです。どちらも「クラスや属性を付けるだけ」で動くので、JavaScriptが苦手でも扱いやすいです。慣れてきたらSwiper、もっと凝ったことをしたくなったらGSAPに進むと、無理なくステップアップできます。
- ライブラリを使うとサイトは重くなりませんか？
-
読み込む分だけは重くなりますが、自分でたくさんのコードを書くより、結果的に軽く済むこともあります。使わないライブラリを読み込まない、必要なページだけで読み込む、といった工夫をすれば、体感で気になることは少ないです。
まとめ
Webサイトアニメーションの代表的なライブラリを5つ紹介しました。
- AOS：スクロールで要素を表示。簡単で初心者向き
- animate.css：CSSだけで動く。クラス2つで実装できる
- Swiper：カルーセル（スライド）を作るならこれ
- Vivus.js：SVGの線を手書き風に描くアニメ
- GSAP：凝ったアニメ全般。2025年に完全無料化
ライブラリはどれか1つを覚えれば終わりではなく、作りたいアニメーションに合わせて使い分けるのがコツです。
まずはAOSやanimate.cssで「ライブラリで動かす感覚」をつかんで、必要になったらSwiperやGSAPに広げていくのがおすすめです。
AIに実装を任せるときも、こうしたライブラリの特徴を知っておくと、指示出しや調整がぐっとスムーズになりますよ。
最後までご覧頂きありがとうございました！
コメント