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

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

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

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

1. Anime.js

01.jpg

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

2. Granim.js

02.jpg

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

3. Kute.js

03.jpg

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

4. Animated Letters

04.jpg

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

5. CountUp.js

05.jpg

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

6. Choreographer.js

06.jpg

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

7. Ramjet

07.jpg

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

8. Sonic

08.jpg

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

9. AOS

09.jpg

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

10. JustGage

10.jpg

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

11. iTyped.js

11.jpg

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