アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。
ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。
今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。
ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ
01. Animate.CSS
Animate.CSS は、クロスブラウザ対応の基本的なアニメーションをまとめたライブラリです。ほぼすべてのプロジェクトのニーズを満たすことができるエフェクトが収録されています。
02. Magic Animations
Magic Animation はインターフェースによりユニークなマイクロインタラクションを追加することを想定したライブラリ。多様性はあまりありませんが、ユーザーエクスペリエンスを充実させるのには十分。
03. Bounce.JS
Bounce.JS は、CSSをベースとしたアニメーションを実現できるライブラリで、カスタマイズ設定後にCSSファイルをエクスポートすることができます。
04. AniJS
AniJS は、シンプルな使い方で直感的にアニメーションを扱うことができます。自分だけのクラス名を設定したり、Animate.CSSを使ってユニークな動きを表現することも可能。
05. Snabbt.JS
Snabbt.JS は、ミニマルなアプローチで素早いアニメーションを実現できるライブラリ。5KBの軽量ファイルには、回転、拡大縮小など基本的な動きがまとめられています。
06. Kute.JS
Kute.JS は、最高のパフォーマンスを実現するアニメーションが特長で、異なる各ブラウザにも対応し、古いブラウザ用フォールバックもばっちり。
07. Velocity.JS
Velocity.JS は、あまりパッとする見栄えではないように思えますが、モーフィングやループ、イージング、スクロールなどあらゆるアニメーションが含まれています。jQueryに依存しない点もポイント。
08. Lazy Line Painter
Lazy Line Painter は、SVGパスアニメーションを手軽に実現できるプラグイン。IllustratorでSVGファイルとして書き出したファイルを変換器にアップロードすれば、あとは生成されたコードをコピペするだけ。
09. SVG.JS
SVG.JS は、SVGを使ったアニメーションを直感的に複製、作成できるプラグイン。jQueryに依存することなく、APIも用意されており、サイズや色、配置、文字パスなどさまざまな要素にアニメーション対応しています。
10. Motion UI
Motion UI は、SASSファイルを使って管理されたCSSアニメーションをまとめたライブラリ。HTMLコンポーネントに適用でき、IE9以外のすべてのブラウザに対応しています。
11. Wait! Animate
Wait Animate は、シンプルなパネル画面からアニメーション生成できるサービス。クロスブラウザに対応した@keyframeアニメーションも嬉しいポイント。
2. Dynamics.JS
Dynamics.JS は、９つの基本エフェクトをカスタマイズできる JavaScript ライブラリ。より滑らかで人間らしい動きを再現できます。
13. Choreographer.JS
Choreographer.JS は、JavaScript ライブラリを利用することで複雑なアニメーションを手軽に実現します。基本アニメーションは少ないですが、カスタマイズ自由でオリジナルの動きを作成できます。
14. Anime.JS
複数のアニメーションを連続させたり、線を描いたり、オブジェクトのモーフィングなど印象的なアニメーションを作成したいときに便利なのが、JavaScript ライブラリ Anime.JS です。最近利用しているケースが多く、軽量で人気の高いライブラリ。
Mo.JS
Mo.JS は、ウェブモーション作成に便利なプラグイン。とても軽量で高速なだけでなく、直感的で簡単です。バブルエフェクトや爆発するようなバーストアニメーションなども再現できます。
16. Sequence.JS
Sequence.JS は、レスポンシブCSSアニメーションフレームワークで、モバイル端末のタッチスクリーンにも対応しています。スライダーやバナーなどダイナミックな動きが必要なときに理想的。
17. Shifty
Shifty は、最適化や高速パフォーマンス、柔軟性と拡張性をテーマに開発されています。GreenSockの代替プラグインとして利用できるでしょう。
18. Tuesday
Tuesday は、他のライブラリとも一緒に利用できる独立アニメーションライブラリです。開始/終了ポイントにスムーズでエレガントな動きを追加できます。
19. CSS Animate
CSS Animate は、すっきりとしたコードでできた@keyframe アニメーションを生成できるサービスです。
20. Vivus.JS
Vivus.JS は、3種類の異なるSVGアニメーションを実現できるプラグインで、カスタム機能を追加することも可能。
21. Bonsai.JS
Bonsai.JS は、より高度なグラフィックアニメーションを実現する JavaScript ライブラリです。オンラインエディタでアニメーションを試すこともでき、サンプルを無料ダウンロードすることもできます。
22. GSAP By GreenSock
GSAP はプロフェッショナルなアニメーション制作を想定したパワフルなプラットフォームです。レスポンシブ対応のさまざまなアニメーションに関する膨大なプラグインや機能も揃います。
23. Popmotion
Popmotion は、Greensockの代わりに利用できる軽量で便利なコレクションで、色のブレンドや豊富な機能やアクションをつかて複雑なアニメーションを制作できます。
24. Tween.JS
Tween.JS は、アニメーションを操作する膨大なパラメーターを揃えたライブラリです。Three.JSをつかったプロジェクトをより魅力的にしたいときにも便利。
25. Hover.CSS
Hover.CSS は、2Dトランジションや背景トランジション、アイコンアニメーション、ボーダーアニメーション、シャドーやグロートランジションなど基本的なカテゴリを集めたライブラリ。
26. Transit
Transit は、とてもスムーズなCSSアニメーションを実現できるライブラリです。Delay や Duration、Easingなども自由にカスタマイズ可能。
27. Rocket
Rocket は、あるポイントから別のポイントへの動きを美しく表現でき、8種類のエフェクトが用意されています。
28. Animo.JS
Animo.JS は、アニメーション遷移をテーマにした基本ツールで、カウントダウンや回転など豊富なプラグインが用意されており、手軽にエフェクトを作成できます。
29. Shift.CSS
Shift.CSS は、ボックス要素にアニメーションを追加、作成できるフレームワークで、15種類の基本アニメーションが用意されています。
30. CSShake
CSShake は、ブルブルと要素が震える11個のクラス名が収録されており、方向や種類、速度などもお好みで調整できます。
31. Saffron
Saffron は、アニメーション遷移をSASS Mixinでまとめたライブラリで、CSSアニメーションをよりシンプルに追加することができます。
32. CSSynth
CSSynth は、nth-childをつかった連続する要素をつかって美しいアニメーションを作成できるオンラインエディタ。ただしモバイル端末には非対応なのでご注意を。
33. Ceaser
Ceaser は、イージングを調整するのに便利な古くから利用されている老舗ツールのひとつで、サンプルを確認しながらアニメーション遷移をカスタマイズできます。
34. Morf.JS
上記で紹介したツールをより高度にカスタマイズできるアニメーション遷移用ツール Morf.JS。40種類の豊富なオプション設定が用意されています。
35. Voxel.CSS
Voxel.CSS は、立体的な3Dレンダリングを得意としたプラグインで、用意されている4種類のクラス名を利用すれば、ユニークな動きを手軽に実装できます。
36. Repaintless.CSS
Repaintless.CSS は、特定のアニメーションをさがしているときに活用したい、Flipテクニックを使ったスムーズなライブラリ。
37. MixItUp
MixItUp は、フィルタリングやソート機能などギャラリーやポートフォリオなどに使える機能を揃えたライブラリで、ハイレベルなパフォーマンスを実現できます。
38. Wallop
Wallop は、要素の表示/非表示を自由に操作できるライブラリ。スライダーの制作を想定していますが、自由で高度なカスタマイズにも対応。
39. Ramjet
Ramjet は、ある要素から別の要素に魅力的なアニメーション付きで変形させる機能が豊富に揃います。DOM要素やSVG、画像やGIFアニメーションにも対応です。
40. jQuery DrawSVG
jQuery DrawSVG は、SVGパスにアニメーションを追加できるプラグインで、実装のしやすさもポイント。
41. Animatic.JS
Animatic.JS は、100個以上のオブジェクトを同時にアニメーションを高速＆軽量パフォーマンスで実現します。
42. Move.JS
Move.JS は、スケーリングや移動など基本アニメーションをまとめたツール。
43. EG.JS
EG.JS は、UIデザインに活用できるインタラクションやえふぇくとをまとめたコンポーネント用ライブラリ。
44. GFX
GFX は、ｊQueryをつかって驚くほど簡単にゴージャスで洗練されたCSSアニメーションを作成できます。
45. Stylie
Stylie は、@keyframeを自由に調整でき、作成したアニメーションはエクスポートもボタンひとつで行うことができます。
46. Iconate.JS
Iconate.JS は、異なるアイコンにアニメーション変形を追加できるプロジェクトで、Font Awesome や Glyphicons アイコンだけでなく、カスタム・ピクトグラムにも最適です。
47. AnimateMate
AnimateMate は、Sketch 環境からアニメーションを作成できるツールで、@keyframeやイージングの調整も思いのまま。
48. Canvas Adavanced Animation Toolkit
CAAT は、ゲームなどで使われる動きをJavaScriptで制御できるプラグイン。
49. Gramin.JS
Gramin.JS は、美しいグラデーションのアニメーションを表現できる JavaScript プラグイン。
50. Animista
Animista は、CSSでスタイリングされたアニメーションを自由に調整、試すことができるプレイグラウンド。
51. Obnoxious.CSS
Obnoxious.CSS は、5つのユニークなCSSアニメーションを揃えており、ブルブルと震えたり、拡大するアニメーションの他、書体を順次切り替える「Fontlicious」エフェクトも。文字テキストへのエフェクトを検討しているときに。
52. Animatelo
Animatelo は、Animate．CSSを使うことで、魅力的でダイナミックなエフェクトを作成でき、すべてのブラウザにも対応しています。
53. Foxholder
Foxholder は、ユーザーのフォーム入力を手助けする15種類の素敵なアニメーションをセットにしています。
54. Rhythm.JS
Rhythm.JS は、踊りのような楽しい動きが特長のアニメーション用JavaScriptライブラリで、20種類の動きが収録されています。
55. Colorido.JS
Colorido.JS は、さまざまな要素の色の変化をダイナミックに行う、高速でクロスブラウザにも対応したプラグインです。
56. Barba.JS
Barba.JS は、PJAXをつかったページ遷移を実装できるプラグインで、シームレスなページ読み込みでより快適なウェブ体験をお届けします。
57. ScrollReveal.JS
ScrollReveal.JS は、スクロールアニメーションを作成するのに人気のツールで、ウェブとモバイルどちらにも対応している点もポイント。
58. Scrollanim
Scrollanim は、より手軽にスクロールアニメーションを実装できるツールで、上記プラグインと合わせて利用しても◎。
59. ScrollTrigger
上記2つのプラグインが垂直方向のスクロールに対応しているのに対して、ScrollTrigger は水平方向への動きを演出したいときに便利なツール。
60. Force.JS
Force.JS は、あまり豊富なオプションが揃っているわけではありませんが、オブジェクトの微妙な動きやスクロールを優先させたいときなどに理想的なツール。
61. AOS
AOS もスクロールに応じたアニメーションを実現するツールで、印象的なエフェクトが中心に揃います。カスタマイズせずに手軽にアニメーションを追加したいときに。
62. Rellax
Rellax は、美しい自分好みのパララックスエフェクトを実現する、軽量なJavaScriptライブラリ。奥行き感をサイトで演出したいときにどうぞ。
63. Tilt.JS
Tilt.JS は、60+fpsの滑らかな動きで立体感のあるパララックスエフェクトをを作成するプラグイン。
64. Transform-When
Transform-When は、素敵なストーリーテリング体験をデザインできるプラグインで、モバイル端末にも対応したハイパフォーマンスなツール。SVGとHTML要素どちらにも利用できます。
65. CSS3 Animation
CSS3 Animation は、基本的なCSSアニメーションをライブプレビューを見ながら作成できる老舗ツール。設定後に生成されたHTML/CSSをコピペすれば利用できるお手軽さ。
66. Curve.JS
Curve.JS は、デザインに利用しているライン線にウネウネとした動きを実装できるプラグイン。
67. Animator.JS
Animator.JS は、CSSアニメーションを柔軟に作成できる軽量プラグインです。@keyframeを簡単に管理することができ、独立して利用できるメリットも。
68. Cel-Animation
Cel-Animation は、@keyframeアニメーションを操作できるSass Mixinコレクションで、SVGとHTML要素に実装できます。
69. Scrollismo
Scrollismo は、ユーザーのスクロールに応じてスムーズなアニメーションを実装でき、Greensockと一緒に利用するのを前提にしています。
70. jQlouds
jQlouds は、インターフェースに雲のような動きを追加できるユニークなプラグイン。もちろん雲を他の静止画要素にも適用できます。
71. Color Animation
Color Animation は、色合いや透明度、背景色やボーダー、テキストカラーなどを変更できるツールで、どんな要素にも適用できます。
72. Flubber
Flubber は、ある要素から別の要素に変化するときに、よりスムーズなアニメーション遷移を実現するプラグイン。唯一の欠点は、平面グラフィックにのみ対応するという点でしょう。
73. Particles.JS
Particles.JS は、細かい粒子がユラユラと動く様子を表現できる、よく見かける人気のプラグイン。色や数、形、サイズ、透明度などを調整したら、あとは反映された結果をエクスポートするだけ。
74. 3D Lines Animation With Three.JS
3D Lines animation with Three.JS は、上記プラグインなどに比べて機能は少ないですが、美しい粒子アニメーションを作成できるツール。
75. Three.JS
Three.JS は、さまざまなクリエイティブなサイトで採用されているパワフルで多才なプラグイン。CanasやSVG、CSS3D、WebGLに対応した3Dアニメーションを表現できます。
参照元リンク : 75 Web Animation Tools You Have to Try – WebDesigner Depot
