ちょっとした気の利いたアニメーションを加えるだけで、ユーザーの目を引くカッコイイサイト作りができるようになります。
軽量のライブラリも増えてきた昨今、アニメーションした方がカッコイイのであれば、アニメーションさせるべきだと私は考えます。
普段CSSアニメーションで動きを表現している人も、jQueryでアニメーションを表現している人も、はたまた全くアニメーションに興味がないという人もいるかと思います。
今回はフロントエンドを手がける全ての人に役立つアニメーションを手軽に実装できるライブラリを15選ご紹介したいと思います。
目次
すぐに使えるアニメーション系ライブラリ15選
JS系アニメーションライブラリ
TweenMax
Flash全盛期から使われ続けているハイエンドライブラリTweenMax。
弊社のサイトでも一部使用していますが、動きが滑らかなのが特徴です。
後述するAnime.jsやCSSアニメーションと比較しても、javascriptで制御しているとは思えないほどのクオリティ。
その分ライブラリ自体113kbと容量が大きいのが気になるところですが、複雑なアニメーションを組みたい場合などはTweenMax一択になるのではないでしょうか。
ライセンスが若干独特なため、サイトのLicensingページを一読しておくと良いでしょう。
Anime.js
TweenMaxと比べて軽量かつ、CSS的な記述でアニメーションを書いていくことができるため、WEBデザイナーでも実装が容易なAnime.js。
滑らかさや同時実行性能はTweenMaxに軍配があがりますが、一般的なサイト構築ではAnime.jsで十分事足ることでしょう。
直感的にアニメーションを書いていくことができる他、ドキュメントもわかりやすく充実しているため、アニメーションをとりあえず試してみたいという方にもオススメです。
TweenJS(CreateJS)
CreateJSの一部で、Adobe Animate CCにも採用されているTweenJS。
フレームレートの変換にも対応しているため、アニメや動画などと同期させやすいのが特徴です。
CSSの単位補完は他のライブラリに劣るため、WebGLの制御や上述したAdobe Animete CCを始めとするHTML5 canvasの制御に使用するのが良いでしょう。
Animsition
画面推移する際に、ページ全体にアニメーションを加えることができるライブラリ。
ローディング画面も加えられるためSPAやVue.js、pjaxなどでサイト制作制作する時なんかはとても使いやすいのではないでしょうか。
ScrollMagic
スクロール連動のためのライブラリScrollMagic。
スクロール位置に合わせてCSSクラスを入れ替えたり、特定の位置でピン留めしたり、スクロールバーの動きに合わせて要素を変化すると行ったことが可能です。
TweenMaxと相性もよく合わせて使うことで、華やかなアニメーションを簡単に実装させることが可能になります。
ScrollTrigger
スクロールし、指定した要素がviewport内に入った際、classやアニメーションを追記することのできるライブラリ。
CSSアニメーションなどと組み合わせる事で手軽にアニメーションを追加することができます。
導入もとても簡単なため、WEBデザイナーの方でも簡単に実装する事が可能です。
AOS
HTMLの要素にdata-aos属性を記述し、加えたいanimationを追加するだけで実装できるとても簡単なアニメーションライブラリ。
上記のScrollTriger実装がとても簡単ですが、複雑なアニメーションはAnime.jsなどで実装するのが現実的かもしれません。
See the Pen AOS – animations by Snik (@michalsnik) on CodePen.
parallax.js
マウスの動きやジャイロセンサーの動きに合わせてパララックス効果が得られるparallax.js。
要素の奥行きなども細かに設定することができるため、SVGファイルなどと組み合わせていくことでインパクトのあるサイトを簡単に作成することができます。
CSSアニメーションライブラリ
Hover.css
Hoverした際のアニメーションを簡単に実装することができるHover.css。
かなり豊富なアニメーションが用意されているため、Webデザイナーの方や、CSSのが苦手という方はとりあえず読み込んで置くと便利なのではないでしょうか。
他にも、Webデザイナーからコーダーへの指示のさいにも、Hover.cssのこの動き！といったような指示の仕方もいいかもしれませんね。
Animation
Hover.cssとは異なり、CSSアニメーションを使った動きを簡単に実装することができるライブラリです。
豊富なアニメーションが用意されているため、見えるだけでも面白いのですが、正直どこで使うんだろうっていうアニメーションも沢山用意されています。
Wicked CSS3 Animations
各アニメーション用のclassを付与するだけで簡単に実装することのできるWicked CSS3 Animations。
CSSアニメーション系のライブラリは実装が簡単なのがいいですね。
ScrollTrigerと組み合わせると色々おもしろいことができそうです。
magic
65アニメーション用意されているmagic。
比較的使いやすそうなアニメーションがごっそり用意されていますね。
CSShake
名前の通り、震えたり揺れたりする系のアニメーションを加える事ができます。
Crazy Shake なんかは鬱陶しくていいですね。
SVGラインアート系
DrawSVG
2kbと軽量なラインアート系ライブラリ。
SVGのPATHを使ってラインをアニメーションするライブラリです。
ロード画面などに使うとかわいいかもしれませんね
Vivus
復数のパスを同時に走らせたり、遅延させたりしながらラインを描かせることのできるVivus。
手書き風にラインアートさせられたり、一直線ではない動きを加えられるため、とても可愛い動きを作り出すことができます。
