ローディング中

すぐに使えるアニメーション系ライブラリ15選

ちょっとした気の利いたアニメーションを加えるだけで、ユーザーの目を引くカッコイイサイト作りができるようになります。
軽量のライブラリも増えてきた昨今、アニメーションした方がカッコイイのであれば、アニメーションさせるべきだと私は考えます。

普段CSSアニメーションで動きを表現している人も、jQueryでアニメーションを表現している人も、はたまた全くアニメーションに興味がないという人もいるかと思います。
今回はフロントエンドを手がける全ての人に役立つアニメーションを手軽に実装できるライブラリを15選ご紹介したいと思います。

すぐに使えるアニメーション系ライブラリ15選

JS系アニメーションライブラリ

TweenMax

ダウンロード
TweenMax

Flash全盛期から使われ続けているハイエンドライブラリTweenMax。
弊社のサイトでも一部使用していますが、動きが滑らかなのが特徴です。
後述するAnime.jsやCSSアニメーションと比較しても、javascriptで制御しているとは思えないほどのクオリティ。
その分ライブラリ自体113kbと容量が大きいのが気になるところですが、複雑なアニメーションを組みたい場合などはTweenMax一択になるのではないでしょうか。

ライセンスが若干独特なため、サイトのLicensingページを一読しておくと良いでしょう。

Anime.js

FireShot Capture 48  anime js  http animejs com

anime.js

TweenMaxと比べて軽量かつ、CSS的な記述でアニメーションを書いていくことができるため、WEBデザイナーでも実装が容易なAnime.js。
滑らかさや同時実行性能はTweenMaxに軍配があがりますが、一般的なサイト構築ではAnime.jsで十分事足ることでしょう。

直感的にアニメーションを書いていくことができる他、ドキュメントもわかりやすく充実しているため、アニメーションをとりあえず試してみたいという方にもオススメです。

TweenJS(CreateJS)

FireShot Capture 51  TweenJS I A JavaScript library for tweenin  https www createjs com tweenjs
TweenJS

CreateJSの一部で、Adobe Animate CCにも採用されているTweenJS。
フレームレートの変換にも対応しているため、アニメや動画などと同期させやすいのが特徴です。

CSSの単位補完は他のライブラリに劣るため、WebGLの制御や上述したAdobe Animete CCを始めとするHTML5 canvasの制御に使用するのが良いでしょう。

Animsition

FireShot Capture 53  Animsition  http git blivesta com animsition

Animsition

画面推移する際に、ページ全体にアニメーションを加えることができるライブラリ。
ローディング画面も加えられるためSPAやVue.js、pjaxなどでサイト制作制作する時なんかはとても使いやすいのではないでしょうか。

ScrollMagic

FireShot Capture 56  ScrollMagic ♥ Demo  http scrollmagic io
ScrollMagic

スクロール連動のためのライブラリScrollMagic。
スクロール位置に合わせてCSSクラスを入れ替えたり、特定の位置でピン留めしたり、スクロールバーの動きに合わせて要素を変化すると行ったことが可能です。
TweenMaxと相性もよく合わせて使うことで、華やかなアニメーションを簡単に実装させることが可能になります。

ScrollTrigger

FireShot Capture 54  ScrollTrigger  Scroll based an  https terwanerik github io ScrollTrigger
ScrollTrigger

スクロールし、指定した要素がviewport内に入った際、classやアニメーションを追記することのできるライブラリ。
CSSアニメーションなどと組み合わせる事で手軽にアニメーションを追加することができます。
導入もとても簡単なため、WEBデザイナーの方でも簡単に実装する事が可能です。

AOS

FireShot Capture 55  AOS  Animate on scroll library  http michalsnik github io aos
AOS

HTMLの要素にdata-aos属性を記述し、加えたいanimationを追加するだけで実装できるとても簡単なアニメーションライブラリ。
上記のScrollTriger実装がとても簡単ですが、複雑なアニメーションはAnime.jsなどで実装するのが現実的かもしれません。

See the Pen AOS – animations by Snik (@michalsnik) on CodePen.

parallax.js

FireShot Capture 57  parallax js  http matthew wagerfield com parallax
parallax.js

マウスの動きやジャイロセンサーの動きに合わせてパララックス効果が得られるparallax.js。
要素の奥行きなども細かに設定することができるため、SVGファイルなどと組み合わせていくことでインパクトのあるサイトを簡単に作成することができます。

CSSアニメーションライブラリ

Hover.css

FireShot Capture 61  Hover css  A collection of CSS3 powered ho  http ianlunn github io Hover

Hover.css

Hoverした際のアニメーションを簡単に実装することができるHover.css。
かなり豊富なアニメーションが用意されているため、Webデザイナーの方や、CSSのが苦手という方はとりあえず読み込んで置くと便利なのではないでしょうか。
他にも、Webデザイナーからコーダーへの指示のさいにも、Hover.cssのこの動き!といったような指示の仕方もいいかもしれませんね。

Animation

FireShot Capture 60  CSS Animation Library for Developers and Ninjas    https cssanimation io

Animation

Hover.cssとは異なり、CSSアニメーションを使った動きを簡単に実装することができるライブラリです。
豊富なアニメーションが用意されているため、見えるだけでも面白いのですが、正直どこで使うんだろうっていうアニメーションも沢山用意されています。

Wicked CSS3 Animations

FireShot Capture 62  Wicked CSS3 Animations  http kristofferandreasen github io wickedCSS

Wicked CSS3 Animations

各アニメーション用のclassを付与するだけで簡単に実装することのできるWicked CSS3 Animations。
CSSアニメーション系のライブラリは実装が簡単なのがいいですね。
ScrollTrigerと組み合わせると色々おもしろいことができそうです。

magic

FireShot Capture 63  Magic Animations CSS3  https minimamente com example magic animations

magic

65アニメーション用意されているmagic。
比較的使いやすそうなアニメーションがごっそり用意されていますね。

CSShake

FireShot Capture 64  CSShake  https elrumordelaluz github io csshake

CSShake

名前の通り、震えたり揺れたりする系のアニメーションを加える事ができます。
Crazy Shake なんかは鬱陶しくていいですね。

SVGラインアート系

DrawSVG

FireShot Capture 58  jQuery DrawSVG  http leocs me jquery drawsvg
DrawSVG

2kbと軽量なラインアート系ライブラリ。
SVGのPATHを使ってラインをアニメーションするライブラリです。
ロード画面などに使うとかわいいかもしれませんね

Vivus

FireShot Capture 59  vivus js  svg animation  https maxwellito github io vivus
Vivus

復数のパスを同時に走らせたり、遅延させたりしながらラインを描かせることのできるVivus。
手書き風にラインアートさせられたり、一直線ではない動きを加えられるため、とても可愛い動きを作り出すことができます。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.