UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン11選

モバイルアプリケーションはもちろん、Webサイトにおいてもアニメーションはエンゲージメントを高めるうえで強力なツールです。
jQueryが流行していたころはjQueryに標準で搭載されているアニメーションを使ったりjQueryプラグインを導入するのが一般的でしたが、現在ではjQueryをベースとしたものに限らず、さまざまなアニメーションプラグインが公開されています。

フルスクリーンで背景が動くアニメーションから小さなホバーエフェクトまで、アニメーションはいたるところで使われています。
今回は、フロントエンドエンジニアやWebデザイナーが知っておきたい、マイクロインタラクションにも使えるアニメーションプラグインをご紹介していきます。

プラグインのメリットは、簡潔に読み込みコードと設定を書き込むだけで、だれもが簡単に導入できる点です。
ぜひ、お気に入りのプラグインをピックアップしていきましょう。

マイクロインタラクションにも使えるアニメーションプラグイン11選

1. Anime.js

Anime.jsはフレキシブルで軽量なJavaScriptのアニメーションライブラリです。
CSSやSVGだけでなく、DOM操作やJavaScriptオブジェクトの操作も行うことができます。
ドキュメンテーションでは詳しいアニメーション設定方法とチュートリアルを確認することができます。

2. Granim.js

Granim.jsは流動的でインタラクティブなグラデーションを実装することのできるJavaScriptライブラリです。
単なるグラデーション背景だけでなく、画像にグラデーションエフェクトをかけたり、イメージマスクを適用したテキストにも活用することができるほど汎用性は高いです。

3. Kute.js

Kute.jsはハイパフォーマンスでサクサク動くJavaScriptのアニメーションエンジンです。
コアエンジンを導入するだけでもユニークなアニメーションを実装できますが、このほかにも「CSSプラグイン」「SVGプラグイン」「テキストプラグイン」やJavaScriptでの制御を柔軟に行う「アトリビュートプラグイン」を導入することで、さまざまな環境でアニメーションを開発することができます。

4. Animated Letters

Animated LettersはSVGを利用したアニメーション付きのフォントを実装することができるアニメーションプラグインです。
利用するためにはSegmentプラグインも必要です。

5. CountUp.js

CountUp.jsは他のライブラリに依存しないJavaScriptクラスで、数字をカウントアップアニメーションで表示することができます。
名前から分かるように「カウントアップ」ができるのはもちろん、設定を変えれば「カウントダウン」をしたり、小数点や接頭辞・接尾辞をつけることもできます。

6. Choreographer.js

Choreographer.jsはマウススクロールやマウスカーソルの位置をイベントハンドラとして設定することができるアニメーションプラグインです。
スマートフォンでは縦長のホームページになることも多いので、スマートフォンサイトでも大活躍しそうなプラグインです。

7. Ramjet

RamjetはDOM要素をさまざまな形に変形しながらアニメーションを加えて表示することができるユニークなJavaScriptプラグインです。
設定によってはスムーズなモーダルウィンドウを設計することも可能です。

8. Sonic

Sonicはさまざまな図形で実装することができる無限ループのプレローダーを作成できるJavaScriptのプラグインです。
Gifアニメーションのように画像割れしてしまうこともないので、高解像度のディスプレイでも綺麗にアニメーション表示することができます。

9. AOS

AOSはAnimate On Scroll Libraryの略で、スクロールするごとにふわりとさまざまな要素を表示することができるJavaScriptライブラリです。
スクロールアップすれば巻き戻しをすることもでき、スクロールするたびにまた要素が表示されます。

10. JustGage

JustGageはお手軽にクールなダッシュボードゲージを生成し、アニメーションで動かすことができるプラグインです。
ベクターデータで表示しているので、拡大しても美しく表示されます。

11. iTyped.js

iTyped.jsはまるでタイプライターで打ち込んでいるかのようなテキストアニメーションを実装することができるプラグインです。
たった2.3KBと超軽量で、現在のカーソルの位置を示すブリンクカーソルをアニメーションに加えることもできます。