あなたのプロジェクトを煌やかにするアニメーションライブラリ18選

Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo


以下はRoden( [Twitter](https://twitter.com/BelichenkoRoden) / [GitHub](https://github.com/Kerthin) / [Webサイト](https://kerthin.github.io/portfolio-templateSait/) )によるアニメーションライブラリ紹介記事、[18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Project](https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo)の日本語訳です。
help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。


元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。


# 18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Project

## Introduction

複雑なアニメーションや便利な機能をあなたのプロジェクトに導入するために、今役に立つ優れたGitHubリポジトリを紹介します。

それではさっそく始めていきましょう。

## 1. Lottie-Web/Bodymovin

https://github.com/airbnb/lottie-web

最初は私お気に入りのリポジトリです。
このライブラリを使うと、`Adobe After Effects`で作成したアニメーションをそのままWebサイトに出力することができます。

![01-0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/f1d9fd92-ccce-6a38-14d8-551e68a73924.gif)
![01-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/992d88fb-0678-77ef-434f-db5e39893586.gif)
![01-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/0c32cb34-2223-80dc-c20a-3c8b76221e44.gif)


## 2. Parallax.js

https://github.com/wagerfield/parallax

マウスで操作できる美しい視覚効果を演出することができます。
さらにオブジェクトの移動速度を調整することもできます。

![02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/a92a1450-5fbf-a372-ba37-6177db58e90f.gif)


## 3. Flat Surface Shader [FSS]

https://github.com/wagerfield/flat-surface-shader

[ランバート反射](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%B3%E3%83%90%E3%83%BC%E3%83%88%E5%8F%8D%E5%B0%84)モデルを使い、光源を反映するタイル背景を生成します。
[デモサイト](http://matthew.wagerfield.com/flat-surface-shader/)。

![03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/bd0cf9dc-d1cd-dbc7-b760-a0f1c231774c.gif)

## 4. Hover.css

https://github.com/IanLunn/Hover

ボタンなどにマウスを乗せたときに起こせるホバーエフェクトのコレクションです。
[デモサイト](http://ianlunn.github.io/Hover/)。

## 5. Video.js Markers

https://github.com/spchuang/videojs-markers

動画のプログレスバーにマーカーを表示して注目させることができます。

![05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/eb33e791-165d-60f6-cff1-760d868be256.jpeg)


## 6. Magic Grid

https://github.com/e-oj/Magic-Grid

ダイナミックなグリッドレイアウトを作成できます。
いちいち`@media`を書く必要もなく、コンテナを指定するだけで全てが終わります。

![06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/b9b1ab09-5ddb-bee7-3d75-3da8b21ec611.gif)


## 7. Vue/React Content Loader

https://github.com/egoist/vue-content-loader
https://github.com/danilowoz/react-content-loader

Facebookカードのようなローディング画面を簡単に作成できます。

![07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/715bcf22-cd6e-9e45-e259-6a5fc43ad62d.gif)


## 8. React Image Gallery

https://github.com/xiaolin/react-image-gallery

イメージギャラリーやカルーセルを表示させるReactコンポーネントです。
[デモサイト](https://www.linxtion.com/demo/react-image-gallery/)。

## 9. WebSlides

https://github.com/webslides/WebSlides

Webサイトをスライド表示にできるライブラリです。
[デモサイト](https://webslides.tv/demos)。

![09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/888072cf-0676-fafc-4f24-afc199e651e5.gif)


## 10. SVG.js

https://github.com/svgdotjs/svg.js

JavaScriptで簡単にSVGを操作、アニメーションさせることができるライブラリです。
[サンプル](https://svgjs.dev/docs/3.0/#go-crazy-with-animations)


https://jsfiddle.net/Fuzzy/f2wbgx5a/



## 11. React Motion

https://github.com/chenglou/react-motion

UIに剛性と減衰を指定するだけで勝手にアニメーションしてくれるライブラリ。
React TransitionGroupのより強力な代替にもなります。

[サンプル](https://github.com/chenglou/react-motion/wiki/Gallery-of-third-party-React-Motion-demos)。

![11-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/a2f3162b-5221-30f9-987b-93d7708b6747.gif)
![11-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/1283f228-b89e-4de4-7064-cc433b206805.gif)
![11-3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e28aeaab-ada7-f0b1-b3ba-cd33770b2b89.gif)


## 12. RELLAX

https://github.com/dixonandmoe/rellax

簡単にパララックスを再現できる軽量ライブラリ。
[デモサイト](https://dixonandmoe.com/rellax/)。

![12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/f5cd34ff-0343-fbdb-5ba5-511da3b6cd6f.gif)


## 13. Dynamics.js

https://github.com/michaelvillar/dynamics.js

物理ベースのアニメーションを作成できるライブラリ。
[デモサイト](http://dynamicsjs.com/)。

![13.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/6164049b-8e49-514e-2580-de6c548664f1.gif)


## 14. mo · js

https://github.com/mojs/mojs

ゼロからアニメーションを始めるための組込コンポーネントとツールを提供します。

[デモサイト](https://mojs.github.io/)。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ogOYJj" data-user="sol0mka" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sol0mka/pen/ogOYJj">
  ·● MOTION for the web ●·</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yNOage" data-user="sol0mka" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sol0mka/pen/yNOage">
  ·•● Bubble • Layout ●•·</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 15. Reveal.js

https://github.com/hakimel/reveal.js

HTMLでプレゼンテーションを作成するフレームワーク。
Markdownサポート、LaTeXサポート、シンタックスハイライト、PDFエクスポートなど幅広い機能が搭載されています。

[デモサイト](https://revealjs.com/)。

![15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/c88c4dca-4a57-137c-a49f-b741522b3cba.gif)


## 16. Animsition

https://github.com/blivesta/animsition

ページ遷移のCSSアニメーションに特化した、シンプルなjQueryプラグイン。

[デモサイト](http://git.blivesta.com/animsition/fade/)。

![16.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/63a7d797-c73c-cd48-502a-6224d3f6340a.gif)


## 17. SVG Mesh 3d

https://github.com/mattdesl/svg-mesh-3d

SVGを三角形に分割します。

[デモサイト](http://mattdesl.github.io/svg-mesh-3d/)。

![17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/34c1cd8b-0167-25f2-d154-72b078ef5eee.gif)


## 18. Zdog

https://github.com/metafizzy/zdog

非常に簡単に、疑似3D要素をつくることのできるライブラリです。
また数学的知識なしに幾何学的形状をつくることができます。

[デモサイト](https://zzz.dog/)

![18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/cf0b7211-fa03-5c74-d4bc-6179b313b29d.gif)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vdwMyW" data-user="desandro" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/desandro/pen/vdwMyW">
  Zdog - Happy town</a> by Dave DeSandro (<a href="https://codepen.io/desandro">@desandro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YebMXQ" data-user="desandro" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/desandro/pen/YebMXQ">
  Zdog - Little forest</a> by Dave DeSandro (<a href="https://codepen.io/desandro">@desandro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="Xwowxz" data-user="chenxinnn" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chenxinnn/pen/Xwowxz">
  Flamingo (ZDog + GSAP)</a> by ChenXin_nth (<a href="https://codepen.io/chenxinnn">@chenxinnn</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjNGvJd" data-user="gabriellewee" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gabriellewee/pen/JjNGvJd">
  Zdog Draggable Monument Valley Totem</a> by Gabrielle Wee 🧧 (<a href="https://codepen.io/gabriellewee">@gabriellewee</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## The End

ご覧いただきありがとうございます。
あなたが使っているリポジトリもぜひ教えてください。
また、この投稿で紹介したものよりよいものも教えてください。

初級フロントエンドエンジニアは、複雑なタスクは自分で実装せずに、既存のソリューションを使った方がいいとアドバイスしておきます。
そのほうが自分やサードパーティのプロジェクトで問題が発生する可能性が低くなるでしょう。

車輪を再発明する必要はありません。

![19.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/88ecf5bb-ae10-e3c5-05c5-fa9cdd2865d1.gif)


時々作品を投稿してるから、よかったら[Twitter](https://twitter.com/BelichenkoRoden)もフォローしてね。


# コメント欄

「Cool」
「こいつは素晴らしいコレクション！」
「実用的で便利なまとめありがとう。」
「もう何年も更新されていないような古いプロジェクトは紹介しないでください。」



# 感想

気楽に使えるアニメーションライブラリ集です。
深く使いこなさなくても、ちょっと置いておくとかでサイトの見た目が華やかになりそうですね。

個人的にはさっさとコンテンツ表示しろ派なのでどうもぴんと来なかったものも多いのですが、まあそういう奴は少数派だろうから気にする必要はないでしょう。
どんどん飾り立ててみましょう。

それにしてもZdogとかすごいね。
色々プラグインもあってなんだかんだと遊び甲斐がありそうです。