CSS3 や SVG など、HTML5 のアニメーションに対応したブラウザが普及したことで、
アニメーションを実装するのが以前と比べて簡単になってきました。

そのため、以前と比べるとアニメーションを WEB ページの多くの要素に使う機会が増えてきます。

ただ、自力でとなると、どうしても技術や工数の問題などで、アニメーションの種類が簡単なものに偏り、ワンパターンになってしまいがちなのが、最近気になってきていました。

そこで、もっとリッチなアニメーションを実装するためのライブラリがないか探していたところ、以下のサイトで「mo.js」というライブラリが紹介されているのを見つけました。

生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい | dwango creators’ blog（ドワンゴクリエイターズブログ）

デモを見ると、とても凝ったアニメーションが実装されており、
是非使ってみたいと思いました。

mo · js – Motion Graphics For The Web

mo.js は HTML の CSS3 と SVG によりアニメーションが実装されるため、
Canvas のように枠にとらわれることもなければ、HTML + CSS3 でのアニメーションのように、形が制限されることもありません。
また、IE9 以上のブラウザで使うことができるなど、多くのブラウザで使うことができるのも特徴です。

以下、mo.js を使って作ったものです。

DEMO

使ってみての感想としては、難易度が高めという印象を受けました。
理由は、

• JavaScript や SVG について、ある程度使い慣れている前提のライブラリになっているよう
• 習得するためには、チュートリアルを実践しながら、長い時間をかけて学習する必要がある
• チュートリアルのデモコードが ECMAScript 6 で書かれているところがあるので、IEや旧ブラウザに対応させるために、そのままのコードは使えない場合がある(でもページからコードを引っこ抜く必要がある)