2019年注目のJavaScriptアニメーションライブラリ11選

>こちらの記事は、[Jonathan Saring](https://blog.bitsrc.io/@JonathanSaring?source=post_page-----9d7ac93a2c59----------------------) 氏により2018年 6月に公開された『 [11 JavaScript Animation Libraries For 2019](https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。



何かいいJavaScriptのアニメーションライブラリがないかとWebを眺めていても、「おすすめ」されているはずの多くライブラリが、実は長い間メンテナンスされていませんでした。

そこで私は調査を重ね、あなたのアプリにも使える11の優れたライブラリ、そして今はほとんどメンテナンスされていないものの、非常に便利ないくつかのライブラリをまとめてみました。

**アドバイス**: JSコンポーネントを個別にパッケージ、公開するのには[Bit](https://bit.dev/)を使いましょう。異なるプロジェクトやアプリケーション間で共有したりすることができ、チーム内でより迅速にアプリケーションを構築することができます。また、任意のライブラリから関数やコンポーネントを簡単にパブリッシュすることもできます。

Bitでは様々なコンポーネントを検索でき、それらは全てプレイグラウンドで試したり、そのまま様々なプロジェクトにインストールできます。チームは更新を提案して同期を保ち、プロジェクト間でコンポーネントとその依存関係に対する変更を制御できます。

![image.png](https://miro.medium.com/max/800/1*eby7DKoLT-OCpOswu2HEbw.gif)




## ピュアなCSSを使う


ライブラリを紹介する前に、あくまでも標準となっているピュアなCSSを使うということも忘れないようにしておきましょう。ピュアなCSSを使うことで、パフォーマンスの向上(GPU)や、下位・上位互換性の提供などのメリットがある他にも、一部のアニメーションを作成する上ではライブラリを使用するよりも効果的な方法である可能性もあります。ここでピュアなCSSを使って作成できる[10の素敵なアニメーションのサンプル](https://webdesign.tutsplus.com/articles/pure-css-animation-inspiration-on-codepen--cms-30875)をご覧ください。

<iframe height="265" style="width: 100%;" scrolling="no" title="Pure CSS Saturn Hula Hooping" src="https://codepen.io/jcoulterdesign/embed/BrdPaw?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/jcoulterdesign/pen/BrdPaw'>Pure CSS Saturn Hula Hooping</a> by Jamie Coulter
  (<a href='https://codepen.io/jcoulterdesign'>@jcoulterdesign</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


# 1.[Three.js](https://github.com/mrdoob/three.js/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407975/81d0f4d6-804b-255e-f9bf-2b2bd551a552.png)


GitHubで43,000スターを超えるこの人気のライブラリは、ブラウザ上で実行可能なWebGLを使った3Dアニメーションを直感的に作成できる優れたライブラリです。このライブラリは、<canvas>、<svg>、CSS3D、WebGLレンダラを提供し、デバイスやブラウザを跨いで開発者が、リッチでユーザーが操作しやすい画面を開発できるようにします。2010年4月に公開されたこのライブラリは、現在も約1000人のコントリビューターによって開発が続けられています。

[mrdoob/three.js
three.js — JavaScript 3D library.
github.com](https://miro.medium.com/max/551/1*AX-ojZx301J9_BU4lan5WQ.gif)



# 2. [Anime.js](https://github.com/juliangarnier/anime)

![image.png](https://miro.medium.com/max/899/1*8cEXCt53kxaYtjLI6eYCKA.gif)


20,000スターを超えるAnime.jsは、CSSプロパティ、CSS transform、SVGやDOM要素の属性、JavaScriptオブジェクトを使用して動作するJavaScriptのアニメーションライブラリです。このライブラリを使用すると、複数のアニメーションプロパティをチェーンしたり、複数のインスタンスを同期したり、タイムラインを作成したりすることができます。

[juliangarnier/animeanime — JavaScript Animation Enginegithub.com](https://github.com/juliangarnier/anime?source=post_page-----9d7ac93a2c59----------------------)

# 3. [Mo.js](https://github.com/mojs/mojs)

![image.png](https://miro.medium.com/max/800/1*dt92pFaY3Py6PB718DOdNQ.gif)


14,000スターを獲得するこのライブラリはシンプルな宣言型API、デバイス間の互換性、そして1,500以上のユニットテストを備えた、ウェブ用のモーショングラフィックスツールベルトです。DOMEまたはSVG DOMEの周囲でオブジェクトを移動したり、独自のmo.jsオブジェクトを作成したりすることができます。ドキュメントはすこし少ないですが、サンプルコードは豊富で、CSS tricksにはこのような[紹介記事](https://css-tricks.com/introduction-mo-js/)もあります。

[legomushroom/mojs
mojs — motion graphics toolbelt for the web
github.com](https://github.com/legomushroom/mojs?source=post_page-----9d7ac93a2c59----------------------)

# 4. [Velocity](https://github.com/julianshapiro/velocity)


<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Cube - Velocity JS Animation" src="https://codepen.io/hone/embed/azRzbe?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/hone/pen/azRzbe'>CSS Cube - Velocity JS Animation</a> by Luca Dimola
  (<a href='https://codepen.io/hone'>@hone</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
   
15,000スターを獲得するVelocityは、jQueryの$.animate()と同じAPIを持つ高速なJavascriptアニメーションエンジンです。カラーアニメーション、トランスフォーム、ループ、イージング、SVGサポートや、スクロールが特徴です。Velocityのハイパフォーマンスエンジンの[詳細](https://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/)と、ライブラリを使用したSVGアニメーションの[紹介](https://davidwalsh.name/svg-animation)はこちら。

[julianshapiro/velocity
velocity — Accelerated JavaScript animation.
github.com](https://github.com/julianshapiro/velocity?source=post_page-----9d7ac93a2c59----------------------)

# 5. [Popmotion](https://github.com/popmotion/popmotion)

![image.png](https://miro.medium.com/max/2000/1*43mWXPbZZIT667NXiNXCbA.gif)


14,000スターを獲得するこのライブラリは、機能的で反応性の高いアニメーションライブラリで、そのサイズはわずか11kbです。このライブラリでは、CSS、SVG、React、three.jsなど、数値を入力として受け入れるどんなAPIからでもアクションと呼ばれるものを作成できます。アクションは起動・停止が可能な一連の値の集まりで、開発者はこれを使ってアニメーションやインタラクションを作成することができます。

[Popmotion/popmotion
popmotion — A functional, reactive animation library.
github.com](https://github.com/Popmotion/popmotion?source=post_page-----9d7ac93a2c59----------------------)

# 6. [Vivus](https://github.com/maxwellito/vivus)

![image.png](https://miro.medium.com/max/882/1*liaA8RgKx9oR5xARY7dCnA.gif)


10,000スターを超えるVivusは、SVGを線で描画されていくようなアニメーションを作成できる依存性のないJavaScriptクラスです。既製のアニメーションの中から選んで使用することも、カスタムスクリプトを使用して、SVGを描画するアニメーションを独自に作成することもできます。ライブサンプルやハンズオンは[Vivus-instant](https://maxwellito.github.io/vivus-instant/)で確認してみてください。

[maxwellito/vivus
vivus — JavaScript library to make drawing animation on SVG
github.com](https://github.com/maxwellito/vivus?source=post_page-----9d7ac93a2c59----------------------)

# 7. [GreenSock JS](https://github.com/greensock/GreenSock-JS)

![image.png](https://miro.medium.com/max/800/1*pxGvIj0qSrQxOjAcqVWM5A.gif)


GSAPは400万以上のWebサイトで使用されているとする、クロスブラウザアニメーションを作成するための、ハイパフォーマンスで依存性のないJavaScriptライブラリです。GSAPは非常に柔軟で、React、Vue、Angular、vanilla JSに対応しています。また、[GSDevtools](https://greensock.com/gsdevtools/)ではGSAPを使って作成されたアニメーションを簡単にデバッグすることができます。

[greensock/GreenSock-JS
GreenSock-JS — GreenSock’s GSAP JavaScript animation library (including Draggable).
github.com](https://github.com/greensock/GreenSock-JS?source=post_page-----9d7ac93a2c59----------------------)

# 8. [Scroll Reveal](https://github.com/scrollreveal/scrollreveal)

![image.png](https://miro.medium.com/max/791/1*W1EUSjFp9fzgBVotnrX16w.gif)


15,000スターを獲得するこのライブラリは、Webやモバイルブラウザ上で、スクロールすると同時に要素が表示されていくスクロールアニメーションを簡単に作成できる、依存性のないライブラリです。このライブラリはいくつかの素敵な表示エフェクトに対応しており、さらには自然言語を使ってアニメーションを定義することもできます。[SitePoint tutorial](https://www.sitepoint.com/revealing-elements-scrollreveal-js/)に簡単なチュートリアルがあります。

[jlmakes/scrollreveal
scrollreveal — Easy scroll animations for web and mobile browsers.
github.com](https://github.com/jlmakes/scrollreveal?source=post_page-----9d7ac93a2c59----------------------)

# 9. [Hover](https://github.com/IanLunn/Hover) (CSS)

![image.png](https://miro.medium.com/max/820/1*xe8ter15XRmBxsFy8VuF1Q.gif)


これはCSSのライブラリになります。20,000スターを獲得するHoverは、CSS3を使用したホバーエフェクトのコレクションを提供し、リンク、ボタン、ロゴ、SVG、画像などに適用できます。このライブラリはCSS、Sass、そしてLESSでも使用できます。このライブラリは使いたいエフェクトだけをあなたのスタイルシートに貼り付けて使ったり、もしくは単にレファレンスとして使うこともできます。

[IanLunn/Hover
Hover — A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so…
github.com](https://github.com/IanLunn/Hover?source=post_page-----9d7ac93a2c59----------------------)

# 10. [Kute.js](https://github.com/thednp/kute.js/)

![image.png](https://miro.medium.com/max/640/1*wO5X8sjMLw5qJVcBN-relQ.gif)


このライブラリは、クロスブラウザアニメーションに不可欠な機能を備えた、本格的なネイティブJavaScriptアニメーションエンジンです。コード品質、柔軟性、パフォーマンス、そしてそのサイズ(コアエンジンは17k、gzip圧縮版は5.5k)に重きを置いていますー[デモ](http://thednp.github.io/kute.js/performance.html)はこちらから。ライブラリは[拡張可能](http://thednp.github.io/kute.js/features.html#performance)なため、独自の機能を追加することもできます。

[thednp/kute.js
kute.js — KUTE.js is a native Javascript animation engine featuring great code quality, badass performance, SVG…
github.com](https://github.com/thednp/kute.js/?source=post_page-----9d7ac93a2c59----------------------)

# 11. [Typed.js](https://github.com/mattboldt/typed.js)

![image.png](https://miro.medium.com/max/648/1*dI6ZGTmRCtZ4OOtaakfItQ.gif)


6,000スターを獲得するこのライブラリでは、文字列がタイプされていくようなアニメーションを自由な選択した速度で作成することができます。また、ページにHTMLのdiv要素を配置し、そこから読み込ませることで、検索エンジンやJavaScriptを無効にしたユーザーにもアクセスできるようにすることも可能です。Slackなどにも使われているこのライブラリはとても人気があり、また驚くほど便利です。

[mattboldt/typed.js
typed.js — A JavaScript Typing Animation Library
github.com](https://github.com/mattboldt/typed.js?source=post_page-----9d7ac93a2c59----------------------)

- こちらもチェックしてみてください: [iTyped](https://github.com/luisvinicius167/ityped)


# 追加: Lottie by Airbnb

![image.png](https://miro.medium.com/max/800/1*qZMz2abxuSdvi6YQOFkLVg.gif)


LottieはWebやiOS用のモバイルライブラリで、jsonとしてエクスポートされた[Adobe After Effects](https://www.adobe.com/products/aftereffects.html)のアニメーションを[Bodymovin](https://github.com/airbnb/lottie-web)で解析し、ネイティブにレンダリングすることができます。


[airbnb/lottie-web
lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native…
github.com](https://github.com/airbnb/lottie-web?source=post_page-----9d7ac93a2c59----------------------)

# メンテナンスされていないが有用なライブラリ

次の8つのライブラリは、現在はほとんどメンテナンスされていないため、注意の上で使用しましょう。

- [Particles](https://github.com/VincentGarreau/particles.js/?source=post_page-----9d7ac93a2c59----------------------)
- [Loaders](https://github.com/ConnorAtherton/loaders.css?source=post_page-----9d7ac93a2c59----------------------)
- [Parallax JS](https://github.com/wagerfield/parallax?source=post_page-----9d7ac93a2c59----------------------)
- [Bounce.js](https://github.com/tictail/bounce.js?source=post_page-----9d7ac93a2c59----------------------)
- [CTA JS](https://github.com/chinchang/cta.js?source=post_page-----9d7ac93a2c59----------------------)
- [Tooltips JS](https://github.com/ytiurin/html5tooltipsjs?source=post_page-----9d7ac93a2c59----------------------)
- [Pace JS](https://github.com/HubSpot/pace?source=post_page-----9d7ac93a2c59----------------------)
- [Anijs](https://github.com/anijs/anijs?source=post_page-----9d7ac93a2c59----------------------)




# 翻訳協力
　
Original Author:  **[Jonathan Saring](https://blog.bitsrc.io/@JonathanSaring?source=post_page-----9d7ac93a2c59----------------------)** 
Thank you for letting us share your knowledge! 


この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当:  yumika tomita
翻訳担当:  siho1
監査担当:  @aoharu
公開担当:  asuma yamada