実務で利用しているJSアニメーションライブラリについて
実務で利用したことがある JS でのアニメーションライブラリについてご紹介します。
スクロールして表示領域に入ったらアニメーションという流れも非常に多いので、併せてスクロール系もご紹介します。
各ライブラリの使い方などは、別途記事にまとめていきたいと思います。
紹介するライブラリ
- アニメーション系
- ガッツリアニメーションならこれ！「TweenMax・TimelineMax」
- SVG のアニメーションや複雑なアニメーションなら「animejs」
- 簡易的なアニメーションで OK なら「Animate.css」
- スクロール系
- 複雑なスクロールイベントなら「ScrollMagic」
- 簡易的なスクロールイベントなら「jQuery AniView」
---
アニメーション系
アニメーションを行うライブラリです。
ガッツリアニメーションならこれ！「TweenMax」
JS でのアニメーションだとまず一番に名前が出ると思うぐらい有名な
- TweenMax
- アニメーションさせる機能
- TimelineMax
- アニメーションのタイムライン管理
をご紹介します。
こんなことができますということで、CodePen のリンクを張っておきます。
「TweenMax」の優れている点
- 複数要素を同時にアニメーションさせる機能
- 各アニメーションのタイミング調整機能
- 有名なので、参考記事が豊富
- 豊富な easing
「TweenMax」のちょっと残念な点
- SVG 周りは有料プラグインが必要なところ
こんな感じでしょうか。有料でも、ぜひ利用していきたいぐらい機能が豊富で素晴らしいプラグインです。
SVG のアニメーションや複雑なアニメーションなら「animejs」
上の「TweenMax」でも十分ですが、個人的には「animejs」もカンタンなのでオススメです！
また、「TweenMax」では SVG 周りのアニメーションが有料なのに対し、ほぼ同じ機能を`animejs`なら無料で実装できます。
こちらは公式の Document で分かりやすくまとまっていますので、参考に張っておきます。
「animejs」の優れている点
- 複数要素を同時にアニメーションさせる機能
- SVGのアニメーションが無料で使える
- 豊富なeasing
「animejs」のちょっと残念な点
- 若干複数要素のアニメーションを同時に行うのが苦手な印象
- TweenMax と比べると、参考記事が少なめ
簡易的なアニメーションで OK なら「Animate.css」
JS ではないのですが、簡易的なアニメーションならこれで十分です！
CSS を読み込み、class や data 属性に動きの設定を入れてあげるだけで実装できます。
公式で動きが確認できますので、用いたいアニメーションの名前を class に入れるだけで OK です。
「Animate.css」の優れている点
- とにかく簡単に実装できる
「Animate.css」のちょっと残念な点
- 複雑なものはできないところ
---
スクロール系
上記アニメーションと組み合わせることで、スクロールして表示領域に入ったらアニメーションという流れが実装できます。
複雑なスクロールイベントなら「ScrollMagic」
さまざまなスクロールイベントを設定できる機能豊富なライブラリです。
いろいろできるので、例を挙げると
- 指定の DOM が見えたあと 100px 下でイベント開始
- スクロール量に応じてアニメーション
- スクロール途中で領域を固定させる
といったことができます。
公式にいろいろ sample がありますので、リンクを張ります。
「ScrollMagic」の優れている点
- 「TweenMax・TimelineMax」との相性が抜群で連携が容易
- スクロール量の取得が容易
- debugger も用意されていて、実装しやすい
- 有名なので、参考記事が豊富
「ScrollMagic」のちょっと残念な点
- 実装にやや手間がかかる
TweenMax・TimelineMaxを利用するなら、ScrollMagicもセットで使うことが多いと思います！
非常に機能が豊富なので、読み解くのが大変かも。。
簡易的なスクロールイベントなら「jQuery AniView」
単純に表示領域に入ったらイベントということだけでしたら、こちらのライブラリで十分です！
Animate.cssと組み合わせると非常に高速に実装できると思います。
「jQuery AniView」の優れている点
- 軽量ライブラリ（1KB 以下）
- シンプルな機能
- 実装が簡単
「jQuery AniView」のちょっと残念な点
- 機能が少ないため、複雑なことはできない
ちょこっとアニメーション入れたいけど、予算も時間もないというときに
Animate.css + jQuery AniViewでサクッと実装するのもイイです！
---
まとめ
いかがでしたでしょうか。
アニメーションを加えたいというときに、ライブラリ選びの参考としていただければと思います。
別記事で、それぞれの使い方やオススメの学習法などまとめていこうと思います。
