ウェブデザイナーが試したい、Webアニメーション無料プラグイン&ライブラリ75個まとめ【保存版】

featured_animation-2

 

アニメーション(英: Animation)は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。

 

ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。

 

今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。

 

 

 

ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ

01. Animate.CSS

Animate.CSS は、クロスブラウザ対応の基本的なアニメーションをまとめたライブラリです。ほぼすべてのプロジェクトのニーズを満たすことができるエフェクトが収録されています。

1-animate-css

 

 

02. Magic Animations

Magic Animation はインターフェースによりユニークなマイクロインタラクションを追加することを想定したライブラリ。多様性はあまりありませんが、ユーザーエクスペリエンスを充実させるのには十分。

2-magic-animations

 

 

03. Bounce.JS

Bounce.JS は、CSSをベースとしたアニメーションを実現できるライブラリで、カスタマイズ設定後にCSSファイルをエクスポートすることができます。

3-bounce-js

 

 

04. AniJS

AniJS は、シンプルな使い方で直感的にアニメーションを扱うことができます。自分だけのクラス名を設定したり、Animate.CSSを使ってユニークな動きを表現することも可能。

4-anij-js

 

 

05. Snabbt.JS

Snabbt.JS は、ミニマルなアプローチで素早いアニメーションを実現できるライブラリ。5KBの軽量ファイルには、回転、拡大縮小など基本的な動きがまとめられています。

5-snabbt-js

 

 

06. Kute.JS

Kute.JS は、最高のパフォーマンスを実現するアニメーションが特長で、異なる各ブラウザにも対応し、古いブラウザ用フォールバックもばっちり。

6-kute-js

 

 

07. Velocity.JS

Velocity.JS は、あまりパッとする見栄えではないように思えますが、モーフィングやループ、イージング、スクロールなどあらゆるアニメーションが含まれています。jQueryに依存しない点もポイント。

7-velocity-js

 

 

08. Lazy Line Painter

Lazy Line Painter は、SVGパスアニメーションを手軽に実現できるプラグイン。IllustratorでSVGファイルとして書き出したファイルを変換器にアップロードすれば、あとは生成されたコードをコピペするだけ。

8-lazy-line-painter

 

 

09. SVG.JS

SVG.JS は、SVGを使ったアニメーションを直感的に複製、作成できるプラグイン。jQueryに依存することなく、APIも用意されており、サイズや色、配置、文字パスなどさまざまな要素にアニメーション対応しています。

9-svg-js

 

 

10. Motion UI

Motion UI は、SASSファイルを使って管理されたCSSアニメーションをまとめたライブラリ。HTMLコンポーネントに適用でき、IE9以外のすべてのブラウザに対応しています。

10-motion-ui

 

 

11. Wait! Animate

Wait Animate は、シンプルなパネル画面からアニメーション生成できるサービス。クロスブラウザに対応した@keyframeアニメーションも嬉しいポイント。

11-wait-animate

 

 

2. Dynamics.JS

Dynamics.JS は、9つの基本エフェクトをカスタマイズできる JavaScript ライブラリ。より滑らかで人間らしい動きを再現できます。

12-dynamics-js

 

 

13. Choreographer.JS

Choreographer.JS は、JavaScript ライブラリを利用することで複雑なアニメーションを手軽に実現します。基本アニメーションは少ないですが、カスタマイズ自由でオリジナルの動きを作成できます。

13-choreographer-js

 

 

14. Anime.JS

複数のアニメーションを連続させたり、線を描いたり、オブジェクトのモーフィングなど印象的なアニメーションを作成したいときに便利なのが、JavaScript ライブラリ Anime.JS です。最近利用しているケースが多く、軽量で人気の高いライブラリ。

14-anime

 

 

Mo.JS

Mo.JS は、ウェブモーション作成に便利なプラグイン。とても軽量で高速なだけでなく、直感的で簡単です。バブルエフェクトや爆発するようなバーストアニメーションなども再現できます。

15-motion

 

 

16. Sequence.JS

Sequence.JS は、レスポンシブCSSアニメーションフレームワークで、モバイル端末のタッチスクリーンにも対応しています。スライダーやバナーなどダイナミックな動きが必要なときに理想的。

16-sequence-js

 

 

17. Shifty

Shifty は、最適化や高速パフォーマンス、柔軟性と拡張性をテーマに開発されています。GreenSockの代替プラグインとして利用できるでしょう。

17-shifty

 

 

18. Tuesday

Tuesday は、他のライブラリとも一緒に利用できる独立アニメーションライブラリです。開始/終了ポイントにスムーズでエレガントな動きを追加できます。

18-it-is-tuesday

 

 

19. CSS Animate

CSS Animate は、すっきりとしたコードでできた@keyframe アニメーションを生成できるサービスです。

19-cssanimate

 

 

20. Vivus.JS

Vivus.JS は、3種類の異なるSVGアニメーションを実現できるプラグインで、カスタム機能を追加することも可能。

20-vivus

 

 

21. Bonsai.JS

Bonsai.JS は、より高度なグラフィックアニメーションを実現する JavaScript ライブラリです。オンラインエディタでアニメーションを試すこともでき、サンプルを無料ダウンロードすることもできます。

21-bonsai-js

 

 

22. GSAP By GreenSock

GSAP はプロフェッショナルなアニメーション制作を想定したパワフルなプラットフォームです。レスポンシブ対応のさまざまなアニメーションに関する膨大なプラグインや機能も揃います。

22-gsap

 

 

23. Popmotion

Popmotion は、Greensockの代わりに利用できる軽量で便利なコレクションで、色のブレンドや豊富な機能やアクションをつかて複雑なアニメーションを制作できます。

23-popmtion

 

 

24. Tween.JS

Tween.JS は、アニメーションを操作する膨大なパラメーターを揃えたライブラリです。Three.JSをつかったプロジェクトをより魅力的にしたいときにも便利。

24-tween-js

 

 

25. Hover.CSS

Hover.CSS は、2Dトランジションや背景トランジション、アイコンアニメーション、ボーダーアニメーション、シャドーやグロートランジションなど基本的なカテゴリを集めたライブラリ。

25-hover-css

 

 

26. Transit

Transit は、とてもスムーズなCSSアニメーションを実現できるライブラリです。Delay や Duration、Easingなども自由にカスタマイズ可能。

26-transit

 

 

27. Rocket

Rocket は、あるポイントから別のポイントへの動きを美しく表現でき、8種類のエフェクトが用意されています。

27-rocket

 

 

28. Animo.JS

Animo.JS は、アニメーション遷移をテーマにした基本ツールで、カウントダウンや回転など豊富なプラグインが用意されており、手軽にエフェクトを作成できます。

28-animo-js

 

 

29. Shift.CSS

Shift.CSS は、ボックス要素にアニメーションを追加、作成できるフレームワークで、15種類の基本アニメーションが用意されています。

29-shift-css

 

 

30. CSShake

CSShake は、ブルブルと要素が震える11個のクラス名が収録されており、方向や種類、速度などもお好みで調整できます。

30-shake

 

 

31. Saffron

Saffron は、アニメーション遷移をSASS Mixinでまとめたライブラリで、CSSアニメーションをよりシンプルに追加することができます。

31-saffron

 

 

32. CSSynth

CSSynth は、nth-childをつかった連続する要素をつかって美しいアニメーションを作成できるオンラインエディタ。ただしモバイル端末には非対応なのでご注意を。

32-cssynth

 

 

33. Ceaser

Ceaser は、イージングを調整するのに便利な古くから利用されている老舗ツールのひとつで、サンプルを確認しながらアニメーション遷移をカスタマイズできます。

33-ceaser

 

 

34. Morf.JS

上記で紹介したツールをより高度にカスタマイズできるアニメーション遷移用ツール Morf.JS。40種類の豊富なオプション設定が用意されています。

34-morf-js

 

 

35. Voxel.CSS

Voxel.CSS は、立体的な3Dレンダリングを得意としたプラグインで、用意されている4種類のクラス名を利用すれば、ユニークな動きを手軽に実装できます。

35-voxel-css

 

 

36. Repaintless.CSS

Repaintless.CSS は、特定のアニメーションをさがしているときに活用したい、Flipテクニックを使ったスムーズなライブラリ。

36-repaintless-css

 

 

37. MixItUp

MixItUp は、フィルタリングやソート機能などギャラリーやポートフォリオなどに使える機能を揃えたライブラリで、ハイレベルなパフォーマンスを実現できます。

37-mixitup

 

 

38. Wallop

Wallop は、要素の表示/非表示を自由に操作できるライブラリ。スライダーの制作を想定していますが、自由で高度なカスタマイズにも対応。

38-wallop

 

 

39. Ramjet

Ramjet は、ある要素から別の要素に魅力的なアニメーション付きで変形させる機能が豊富に揃います。DOM要素やSVG、画像やGIFアニメーションにも対応です。

39-ramjet

 

 

40. jQuery DrawSVG

jQuery DrawSVG は、SVGパスにアニメーションを追加できるプラグインで、実装のしやすさもポイント。

40-jquery-drawsvg

 

 

41. Animatic.JS

Animatic.JS は、100個以上のオブジェクトを同時にアニメーションを高速&軽量パフォーマンスで実現します。

41-animatic-js

 

 

42. Move.JS

Move.JS は、スケーリングや移動など基本アニメーションをまとめたツール。

42-move-js

 

 

43. EG.JS

EG.JS は、UIデザインに活用できるインタラクションやえふぇくとをまとめたコンポーネント用ライブラリ。

43-eg-js

 

 

44. GFX

GFX は、jQueryをつかって驚くほど簡単にゴージャスで洗練されたCSSアニメーションを作成できます。

44-gfx

 

 

45. Stylie

Stylie は、@keyframeを自由に調整でき、作成したアニメーションはエクスポートもボタンひとつで行うことができます。

45-stylie

 

 

46. Iconate.JS

Iconate.JS は、異なるアイコンにアニメーション変形を追加できるプロジェクトで、Font Awesome や Glyphicons アイコンだけでなく、カスタム・ピクトグラムにも最適です。

46-iconate-css

 

 

47. AnimateMate

AnimateMate は、Sketch 環境からアニメーションを作成できるツールで、@keyframeやイージングの調整も思いのまま。

47-animate-mate

 

 

48. Canvas Adavanced Animation Toolkit

CAAT は、ゲームなどで使われる動きをJavaScriptで制御できるプラグイン。

48-caat

 

 

49. Gramin.JS

Gramin.JS は、美しいグラデーションのアニメーションを表現できる JavaScript プラグイン。

49-granim-js

 

 

50. Animista

Animista は、CSSでスタイリングされたアニメーションを自由に調整、試すことができるプレイグラウンド。

50-animista

 

 

51. Obnoxious.CSS

Obnoxious.CSS は、5つのユニークなCSSアニメーションを揃えており、ブルブルと震えたり、拡大するアニメーションの他、書体を順次切り替える「Fontlicious」エフェクトも。文字テキストへのエフェクトを検討しているときに。

51-obnoxious

 

 

52. Animatelo

Animatelo は、Animate.CSSを使うことで、魅力的でダイナミックなエフェクトを作成でき、すべてのブラウザにも対応しています。

52-animatelo

 

 

53. Foxholder

Foxholder は、ユーザーのフォーム入力を手助けする15種類の素敵なアニメーションをセットにしています。

53-foxholder

 

 

54. Rhythm.JS

Rhythm.JS は、踊りのような楽しい動きが特長のアニメーション用JavaScriptライブラリで、20種類の動きが収録されています。

54-rythm-js

 

 

55. Colorido.JS

Colorido.JS は、さまざまな要素の色の変化をダイナミックに行う、高速でクロスブラウザにも対応したプラグインです。

55-colorido-js

 

 

56. Barba.JS

Barba.JS は、PJAXをつかったページ遷移を実装できるプラグインで、シームレスなページ読み込みでより快適なウェブ体験をお届けします。

56-barba-js

 

 

57. ScrollReveal.JS

ScrollReveal.JS は、スクロールアニメーションを作成するのに人気のツールで、ウェブとモバイルどちらにも対応している点もポイント。

57-scrollreveal

 

 

58. Scrollanim

Scrollanim は、より手軽にスクロールアニメーションを実装できるツールで、上記プラグインと合わせて利用しても◎。

58-scrollanim

 

 

59. ScrollTrigger

上記2つのプラグインが垂直方向のスクロールに対応しているのに対して、ScrollTrigger は水平方向への動きを演出したいときに便利なツール。

59-scrolltrigger

 

 

60. Force.JS

Force.JS は、あまり豊富なオプションが揃っているわけではありませんが、オブジェクトの微妙な動きやスクロールを優先させたいときなどに理想的なツール。

60-force-js

 

 

61. AOS

AOS もスクロールに応じたアニメーションを実現するツールで、印象的なエフェクトが中心に揃います。カスタマイズせずに手軽にアニメーションを追加したいときに。

61-aos

 

 

62. Rellax

Rellax は、美しい自分好みのパララックスエフェクトを実現する、軽量なJavaScriptライブラリ。奥行き感をサイトで演出したいときにどうぞ。

62-rellax

 

 

63. Tilt.JS

Tilt.JS は、60+fpsの滑らかな動きで立体感のあるパララックスエフェクトをを作成するプラグイン。

63-tilt-js

 

 

64. Transform-When

Transform-When は、素敵なストーリーテリング体験をデザインできるプラグインで、モバイル端末にも対応したハイパフォーマンスなツール。SVGとHTML要素どちらにも利用できます。

64-transform-when

 

 

65. CSS3 Animation

CSS3 Animation は、基本的なCSSアニメーションをライブプレビューを見ながら作成できる老舗ツール。設定後に生成されたHTML/CSSをコピペすれば利用できるお手軽さ。

65-css3-animation

 

 

66. Curve.JS

Curve.JS は、デザインに利用しているライン線にウネウネとした動きを実装できるプラグイン。

66-curve-js

 

 

67. Animator.JS

Animator.JS は、CSSアニメーションを柔軟に作成できる軽量プラグインです。@keyframeを簡単に管理することができ、独立して利用できるメリットも。

67-animator-js

 

 

68. Cel-Animation

Cel-Animation は、@keyframeアニメーションを操作できるSass Mixinコレクションで、SVGとHTML要素に実装できます。

68-cel-animation

 

 

69. Scrollismo

Scrollismo は、ユーザーのスクロールに応じてスムーズなアニメーションを実装でき、Greensockと一緒に利用するのを前提にしています。

69-scrollissimo

 

 

70. jQlouds

jQlouds は、インターフェースに雲のような動きを追加できるユニークなプラグイン。もちろん雲を他の静止画要素にも適用できます。

70-jqclouds

 

 

71. Color Animation

Color Animation は、色合いや透明度、背景色やボーダー、テキストカラーなどを変更できるツールで、どんな要素にも適用できます。

71-color-animation

 

 

72. Flubber

Flubber は、ある要素から別の要素に変化するときに、よりスムーズなアニメーション遷移を実現するプラグイン。唯一の欠点は、平面グラフィックにのみ対応するという点でしょう。

72-flubber

 

 

73. Particles.JS

Particles.JS は、細かい粒子がユラユラと動く様子を表現できる、よく見かける人気のプラグイン。色や数、形、サイズ、透明度などを調整したら、あとは反映された結果をエクスポートするだけ。

73-particles-js

 

 

74. 3D Lines Animation With Three.JS

3D Lines animation with Three.JS は、上記プラグインなどに比べて機能は少ないですが、美しい粒子アニメーションを作成できるツール。

74-3d-lines

 

 

75. Three.JS

Three.JS は、さまざまなクリエイティブなサイトで採用されているパワフルで多才なプラグイン。CanasやSVG、CSS3D、WebGLに対応した3Dアニメーションを表現できます。

75-three-js

 

海外サイト WebDesigner Depot で公開された 75 Web Animation Tools You Have to Try by Nataly Birch より許可をもらい、翻訳転載しています。

 

参照元リンク : 75 Web Animation Tools You Have to Try – WebDesigner Depot