Edited at

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


こちらの記事は、Jonathan Saring 氏により2018年 6月に公開された『 11 JavaScript Animation Libraries For 2019 』の和訳です。

本記事は原著者から許可を得た上で記事を公開しています。


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

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

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

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

image.png


ピュアなCSSを使う

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


1.Three.js

image.png

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

mrdoob/three.js

three.js — JavaScript 3D library.

github.com


2. Anime.js

image.png

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

juliangarnier/animeanime — JavaScript Animation Enginegithub.com


3. Mo.js

image.png

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

legomushroom/mojs

mojs — motion graphics toolbelt for the web

github.com


4. Velocity

15,000スターを獲得するVelocityは、jQueryの$.animate()と同じAPIを持つ高速なJavascriptアニメーションエンジンです。カラーアニメーション、トランスフォーム、ループ、イージング、SVGサポートや、スクロールが特徴です。Velocityのハイパフォーマンスエンジンの詳細と、ライブラリを使用したSVGアニメーションの紹介はこちら。

julianshapiro/velocity

velocity — Accelerated JavaScript animation.

github.com


5. Popmotion

image.png

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

Popmotion/popmotion

popmotion — A functional, reactive animation library.

github.com


6. Vivus

image.png

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

maxwellito/vivus

vivus — JavaScript library to make drawing animation on SVG

github.com


7. GreenSock JS

image.png

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

greensock/GreenSock-JS

GreenSock-JS — GreenSock’s GSAP JavaScript animation library (including Draggable).

github.com


8. Scroll Reveal

image.png

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

jlmakes/scrollreveal

scrollreveal — Easy scroll animations for web and mobile browsers.

github.com


9. Hover (CSS)

image.png

これは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


10. Kute.js

image.png

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

thednp/kute.js

kute.js — KUTE.js is a native Javascript animation engine featuring great code quality, badass performance, SVG…

github.com


11. Typed.js

image.png

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

mattboldt/typed.js

typed.js — A JavaScript Typing Animation Library

github.com


  • こちらもチェックしてみてください: iTyped


追加: Lottie by Airbnb

image.png

LottieはWebやiOS用のモバイルライブラリで、jsonとしてエクスポートされたAdobe After EffectsのアニメーションをBodymovinで解析し、ネイティブにレンダリングすることができます。

airbnb/lottie-web

lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native…

github.com


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

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


翻訳協力

 

Original Author: Jonathan Saring

Thank you for letting us share your knowledge!

この記事は以下の方々のご協力により公開する事が出来ました。

改めて感謝致します。

選定担当: yumika tomita

翻訳担当: siho1

監査担当: @aoharu

公開担当: asuma yamada

 


ご意見・ご感想をお待ちしております

今回の記事は、いかがだったでしょうか?

・こうしたら良かった、もっとこうして欲しい、こうした方が良いのではないか

・こういったところが良かった

などなど、率直なご意見を募集しております。

いただいたお声は、今後の記事の質向上に役立たせていただきますので、お気軽にコメント欄にてご投稿ください。Twitterでもご意見を受け付けております。

みなさまのメッセージをお待ちしております。