フロントエンド開発者やゲーム開発者におすすめの、クールで無料のオープンソース JavaScript アニメーションライブラリ 20 個。

Web ページでクールな動的効果を実現したいが、車輪の再発明はしたくない場合は、次のオープンソースの JavaScript アニメーションライブラリを試してみる価値があります。

1. three.js (95.4K スター)

https://github.com/mrdoob/three.js/

three.jsライブラリは、ゲーム、子供向け教育ウェブサイト、そしてあらゆる種類の洗練されたプレゼンテーションのための複雑なウェブアニメーションを開発できる、優れた2D/3D JavaScriptアニメーションライブラリです。現在、WebGL、実験的なWebGPU、SVG、CSS3Dなどのレンダラーが利用可能です。

three.js のクールな効果をぜひチェックしてください: https://threejs.org/examples/#webgl_animation_keyframes

2. Anime.js (47.4K スター)

https://github.com/juliangarnier/anime

Anime.js は、CSS プロパティ、SVG、DOM プロパティ、JavaScript オブジェクトなどのアニメーションタイプを処理できる強力な API を備えた軽量の JavaScript アニメーションライブラリです。

3. スクロールリビール（21.8Kスター）

https://github.com/jlmakes/scrollreveal

ScrollReveal は、ウィンドウに出入りする要素用の JavaScript アニメーションライブラリです。

4. バビロン（21.6K スター）

バビロンJS

Babylon.jsは、主にJavaScriptで書かれたアニメーションおよびゲームエンジンです。WebGPUサポートを内蔵しており、デスクトップブラウザとモバイルブラウザの両方で実行できます。

5. モイス（18.1Kスター）

https://github.com/mojs

Mojs は、モーションプレーヤー (Mojs Player)、カーブおよびタイムラインモーションエディターなど、多数の非常に便利なオープンソースツールを提供する無料のオープンソースアニメーションライブラリです。

6. GreenSock（17.4Kスター）

https://github.com/greensock/GSAP

https://gsap.com/

GreenSockは、開発者が複雑なアニメーションを簡単に作成できる、高水準で非常に豊富なJavaScriptアニメーションライブラリです。スムーズなSVGアニメーションを作成するためのDrawSVGPlugin、MorphSVGPlugin、MotionPathPluginを提供しています。

GreenSock はデフォルトで WebGL をサポートしているため、多くの JavaScript ゲーム開発者がゲームにエフェクトを追加する際に好んで選択しています。

GASP（GreenSock Animation Platform）は、主要ブラウザで高性能なアニメーションを構築できる強力なJavaScriptツールキットです。CSSアニメーション、SVG、Canvas、React、Vue、WebGL、カラー、文字列、モーションパスなど、JavaScriptで制御できるほぼすべての要素が含まれています。

GSAPのScrollTriggerプラグインを使えば、最小限のコードで魅力的なスクロールアニメーションを作成できます。gsap.matchMedia()関数を使えば、レスポンシブでアクセシブルなアニメーションを簡単に構築できます。

7. Velocity.js (17.2K スター)

https://github.com/julianshapiro/velocity

http://velocityjs.org/

Velocityは、jQueryの$.animate()に似たAPIを備えたアニメーションエンジンです。非常に高速で、カラーアニメーション、変形、ループ、スムーズアニメーション、SVG、スクロールなどのサポートが主な機能です。

8. ヴィヴス（15Kスター）

https://github.com/maxwellito/vivus

https://maxwellito.github.io/vivus/

Vivusは、SVGアニメーションを実装するための依存性のない軽量なJavaScriptクラスで、まるで描かれたような外観を実現します。様々なアニメーション効果と、SVGを好きなように描画するためのカスタムスクリプトを作成するオプションが含まれています。

9. TweenJS（4Kスター）

https://github.com/CreateJS/TweenJS

TweenJSは、JavaScriptで使用されるシンプルなトゥイーンアニメーションライブラリです。EaselJSライブラリとの統合を目的として開発されましたが、EaselJSライブラリに依存していません。数値オブジェクトプロパティとCSSスタイルプロパティのトゥイーンアニメーションをサポートしています。

10. Scene.js (2.6K スター)

https://github.com/daybrush/scenejs

Scene.jsはJavaScriptベースのCSSタイムラインアニメーションライブラリです。フロントエンド開発者が複雑なオブジェクトアニメーションを素早く作成できるよう、多数のサンプルが用意されています。例としては、ツリーエフェクト、雪の結晶が舞い落ちるアニメーション、キューブエフェクト、コンテンツカードの回転、円形バースト、チェッカーボードアニメーションなどがあります。以下をご覧ください。

11. アニマティック（1.4Kスター）

https://github.com/lvivski/animatic

Animaticを使えば、100以上のオブジェクトを一度に簡単にアニメーション化できます。リアルなオブジェクトをシミュレートするのに使用でき、サイズはわずか7KBです。

12.Typed.js

https://github.com/mattboldt/typed.js/

Typed.jsは、入力アニメーションを実装するためのJavaScriptアニメーションライブラリです。入力した文字を、設定した速度で表示できます。以下のウェブサイトには、参考となるサンプルがいくつか掲載されています。

https://mattboldt.com/demos/typed-js/

13.Between.js

https://github.com/sasha240100/between.js

Between.jsは、すべてのブラウザで動作し、シンプルなAPIを備えた軽量なJavaScript（ES6）トゥイーンライブラリです。以下のウェブサイトでは、Between.jsの様々なサンプルが紹介されています。

https://between.js.org/

14. ジャスト・アニメイト2

https://github.com/just-animate/just-animate

Just Animate 2 は、タイムラインアニメーション、シーケンス、CSS アニメーションをサポートし、トゥイーンエンジンを内蔵した機能豊富なアニメーションライブラリです。

15. パワーグリッチ

https://github.com/7PH/パワーグリッチ

PowerGlitchは、外部依存関係のないスタンドアロンのアニメーションライブラリです。CSSアニメーションを使用して小さなアニメーションを表示し、JavaScriptファイル全体は2KB未満と非常に軽量です。

16.スターバックス

https://github.com/zuramai/starback.js

Starback.js は、Web ページに美しい星のアニメーションやスノーフレーク効果を作成するために使用されます。

17. アニメーションの読み込み

https://github.com/Skparab1/loading-animations

これは、コード例とともに多くの読み込みアニメーションを提供するシンプルな JavaScript 読み込みアニメーションライブラリです。

18. プログレスバー.js

https://github.com/kimmobrunfeldt/progressbar.js

https://kimmobrunfeldt.github.io/progressbar.js/

Progressbar.jsは、アニメーションSVGパスを使用したレスポンシブなプログレスバーアニメーションを提供します。組み込みのシェイプを使用することも、独自のパスを作成して必要に応じてカスタムアニメーションを実装することもできます。滑らかなアニメーション効果をお楽しみください。

19. モータス

https://github.com/alexcambose/motus

Motus は、シミュレートされた CSS キーフレームを作成して美しいスクロールアニメーションを実現できる、シンプルで依存関係のない JavaScript アニメーションライブラリです。

20.ジョシュ.js

https://github.com/mamunhpath/josh.js

Josh.jsは、ページスクロールアニメーション用のシンプルなJavaScriptライブラリです。Josh.jsはjQueryに依存せず、バックエンドとしてAnimate.cssを使用しているため、独自のアニメーションを作成できます。また、Josh.jsはES6をサポートしており、ES5用のコンパイル済みバージョンも提供しています。

DUICUO