実務で利用しているJSアニメーションライブラリについて

実務で利用しているJSアニメーションライブラリについて

こんにちは!

本日は、実務で利用したことがある、JSでのアニメーションライブラリについてご紹介します。

スクロールして表示領域に入ったらアニメーションという流れも非常に多いので、併せてスクロール系もご紹介します。

各ライブラリの使い方などは、別途記事にまとめていきたいと思います。

紹介するライブラリ

  • アニメーション系
    • ガッツリアニメーションならこれ!「TweenMax・TimelineMax」
    • SVGのアニメーションや複雑なアニメーションなら「animejs」
    • 簡易的なアニメーションでOKなら「Animate.css」
  • スクロール系
    • 複雑なスクロールイベントなら「ScrollMagic」
    • 簡易的なスクロールイベントなら「jQuery AniView」

アニメーション系

アニメーションを行うライブラリです。

ガッツリアニメーションならこれ!「TweenMax」

JSでのアニメーションだとまず一番に名前が出ると思うぐらい有名な

  • TweenMax
    • アニメーションさせる機能
  • TimelineMax
    • アニメーションのタイムライン管理

をご紹介します。

こんなことができますということで、CodePenのリンクを張っておきます。

CodePen参考

とくに優れている点

  • 複数要素を同時にアニメーションさせる機能
  • 各アニメーションのタイミング調整機能
  • 有名なので、参考記事が豊富
  • 豊富なeasing

ちょっと残念な点

  • SVG周りは有料プラグインが必要なところ

こんな感じでしょうか。有料でも、ぜひ利用していきたいぐらい機能が豊富で素晴らしいプラグインです。

SVGのアニメーションや複雑なアニメーションなら「animejs」

上の「TweenMax」でも十分ですが、個人的には「animejs」もカンタンなのでオススメです!

また、「TweenMax」ではSVG周りのアニメーションが有料なのに対し、ほぼ同じ機能をanimejsなら無料で実装できます。

こちらは公式のDocumentで分かりやすくまとまっていますので、参考に張っておきます。

公式

とくに優れている点

  • 複数要素を同時にアニメーションさせる機能
  • SVGのアニメーションが無料で使える
  • 豊富なeasing

ちょっと残念な点

  • 若干複数要素のアニメーションを同時に行うのが苦手な印象
  • TweenMaxと比べると、参考記事が少なめな

簡易的なアニメーションでOKなら「Animate.css」

JSではないのですが、簡易的なアニメーションならこれで十分です!

CSSを読み込み、classやdata属性に動きの設定を入れてあげるだけで実装できます。

公式で動きが確認できますので、用いたいアニメーションの名前をclassに入れるだけでOKです。

公式

とくに優れている点

  • とにかく簡単に実装できる

ちょっと残念な点

  • 複雑なものはできないところ

スクロール系

上記アニメーションと組み合わせることで、スクロールして表示領域に入ったらアニメーションという流れが実装できます。

複雑なスクロールイベントなら「ScrollMagic」

さまざまなスクロールイベントを設定できる機能豊富なライブラリです。

いろいろできるので、例を挙げると

  • 指定のDOMが見えたあと100px下でイベント開始
  • スクロール量に応じてアニメーション
  • スクロール途中で領域を固定させる

といったことができます。

公式にいろいろsampleがありますので、リンクを張ります。

公式サンプル

とくに優れている点

  • TweenMax・TimelineMax」との相性が抜群で連携が容易
  • スクロール量の取得が容易
  • debuggerも用意されていて、実装しやすい
  • 有名なので、参考記事が豊富

ちょっと残念な点

  • 実装にやや手間がかかる

TweenMax・TimelineMaxを利用するなら、ScrollMagicもセットで使うことが多いと思います!
非常に機能が豊富なので、読み解くのが大変かも。。

簡易的なスクロールイベントなら「jQuery AniView」

単純に表示領域に入ったらイベントということだけでしたら、こちらのライブラリで十分です!

Animate.cssと組み合わせると非常に高速に実装できると思います。

公式

とくに優れている点

  • 軽量ライブラリ(1KB以下)
  • シンプルな機能
  • 実装が簡単

ちょっと残念な点

  • 機能が少ないため、複雑なことはできない

ちょこっとアニメーション入れたいけど、予算も時間もないというときに
Animate.css + jQuery AniViewでサクッと実装するのもイイです!


まとめ

いかがでしたでしょうか。

アニメーションを加えたいというときに、ライブラリ選びの参考としていただければと思います。

別記事で、それぞれの使い方やオススメの学習法などまとめていこうと思います。

ポートフォリオ・お問合せはこちら