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

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

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

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

1. Anime.js

01.jpg

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

2. Granim.js

02.jpg

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

3. Interaction Plus

03.jpg

Interaction Plusはさまざまなアニメーションを含んだポップアップやモーダルウィンドウのコレクションプラグインです。
ページロード時、スクロール時、クリック時などにイベントハンドラを設定し、ポップアップウィンドウを表示することが可能です。

4. Mo.js

04.jpg

Mo.jsは非常に簡単にすばやくRetinaディスプレイにも対応した高解像度のアニメーションを実装することのできるJavaScriptライブラリです。
Tutorialsでは円や三角形などの形を再現するチュートリアルを確認することができます。

参考:
ホームページにダイナミックな動きを!JavaScriptフレームワーク「mo.js」の特徴と使い方

5. Kute.js

05.jpg

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

6. Ember Burger Menu

06.jpg

Ember Burger Menuは、CSSトランジションを使って表示することができるハンバーガーメニュー用のアニメーションプラグインです。
右上あるいは左上に表示されたハンバーガーメニューをクリックすると、ぬるっとスムーズなアニメーションを使ってハンバーガーメニューが表示されます。

7. Animated Letters

07.jpg

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

8. CountUp.js

08.jpg

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

9. Choreographer.js

09.jpg

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

10. Ramjet

10.jpg

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

11. Sonic

11.jpg

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

12. AOS

12.jpg

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

13. JustGage

13.jpg

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

14. SVG.js

14.jpg

SVG.jsはSVGアニメーションを操作するための軽量なライブラリです。
他のライブラリに依存せず、強豪のSnap.svgRaphaëlよりも軽量でサクサク動きます。

15. iTyped.js

15.jpg

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

まとめ

無味乾燥で動きのないホームページよりも、人間味あふれるちょっとしたアニメーションを加えた方が、使い心地もよくなり、全体的なUXが向上します。
すでに完成したホームページがある場合は、いずれかのプラグインを加えて少しだけ動きを加えてみるのはいかがでしょうか。

使いすぎるとくどくなってしまいますが、ワンポイントで使ってあげるだけでも、他のホームページとの差別化を図ることができます。
さまざまなエフェクトが用意されているので、とっておきのアニメーションを見つけてみてください。