Javascript

【2020年版】JavaScriptアニメーションライブラリ5選

ライブラリ名容量ライセンス
anime.js 17KB(圧縮版)MIT
velocity.js 49KB(圧縮版)MIT
GSAP 59KB(圧縮版)*無償ライセンス(有償の場合あり)
TweenJS(CreateJS) 27KB(圧縮版)MIT
KUTE.js 17KB(圧縮版)MIT
*閲覧に課金が必要なページの場合ライセンスの購入が必要

anime.js

Anime.jsは、CSSプロパティ、SVGやDOM要素の属性、JavaScriptオブジェクトを使用して動作するJavaScriptのアニメーションライブラリ。

MITライセンス

https://animejs.com/

各アニメーションのサンプルが以下で確認できます。

https://animejs.com/documentation/

Velocity.js

Velocityは、jQueryの$ .animate()と同じAPIを持つアニメーションエンジン。jQueryの有無にかかわらず動作します。カラーアニメーション、トランスフォーム、ループ、イージング、SVGアニメーション、スクロール等のアニメーションが可能です。

MITライセンス

http://velocityjs.org/

GSAP

GSAPは、すべての主要なブラウザで機能する高性能アニメーションを構築するためのJavaScriptライブラリです。
CSS、SVG、canvas、React、Vue、WebGL、色、文字列、モーションパス、汎用オブジェクトなど、JavaScriptで構築できるものをアニメーション化します。

無償ライセンスと有償ライセンスがあります。
ページの閲覧に課金が必要な場合ライセンスの購入が必要になります。

https://greensock.com/docs/v3/Installation

TweenJS (CreateJS)

TweenJSは、シンプルで強力なトゥイーンインターフェイスを提供する、Javascriptライブラリです。Grant Skinner氏が代表を務めるgskinner社が開発を行っています。

MITライセンス

https://www.createjs.com/tweenjs

KUTE.js

KUTE.jsは高度なカスタムアニメーションにも対応できるJavascriptのアニメーションエンジンです。アニメーションのコアエンジンと、CSSプラグインやSVGプラグイン等を必要に応じて読み込むモジュール型となっています。

MITライセンス

https://thednp.github.io/kute.js/