【アニメーション特集 -5】JavaScriptアニメーションライブラリまとめ（2021年2月版）

こんにちは。FASTCODINGデザイナーの七転び八重子です。
アニメーションをシリーズでまとめて見よう！第5回は、「JavaScriptアニメーションライブラリ2021年2月まとめ」です。前回、JavaScriptアニメーションについて、基本をまとめましたので、今回はJavaScriptおすすめライブラリのまとめです。

FASTCODING BLOG

【アニメーション特集 - 1】アニメーションはCSSとJSのどちらを使うべきなのか？

こんにちは。FASTCODINGデザイナーの七転び八重子です。WebサイトのUI/UXに欠かせないアニメーション。ボタンをふわふわ動かしたり、要素をスライドインさせたり等、アニメーションを取り入れる事でユーザーを誘導することができ、コンバージョンにも大きく影響します。ですが、使い方を間違えると、逆にUXは低下することもあります。今回はそんな、アニメーションをシリーズでまとめて見ようと思います。第一回は、「アニメーションはCSSとJSのどちらを使うべきなのか？」です。目次アニメーションを正しく理解するその１　滑らか...

FASTCODING BLOG

【アニメーション特集 -2】CSSアニメーションの基本・作り方まとめ

こんにちは。FASTCODINGデザイナーの七転び八重子です。アニメーションをシリーズでまとめて見よう！第二回は、「CSSアニメーションの基本・作り方まとめ」です。CSSアニメーションで実際に、利用場面が多いボタンエフェクトや要素をスライドインさせる動きを作ってみようと思います。アニメーション特集１「アニメーションはCSSとJSのどちらを使うべきなのか？」はこちら。目次 CSSでアニメーションを作る方法は2つ簡単に実装できる　transition 細かく設定できる　animation transi...

FASTCODING BLOG

【アニメーション特集 -3】CSSアニメーションライブラリ2021年まとめ

こんにちは。FASTCODINGデザイナーの七転び八重子です。アニメーションをシリーズでまとめて見よう！第３回は、「CSSアニメーションライブラリまとめ」です。任意の要素にクラスを付与するだけでアニメーションを実装できる便利なライブラリをまとめてみました。もちろん、動的にアニメーションの再生を制御したい場合は、JavaScriptによる処理が必要になります。目次 CSSでアニメーションライブラリ文字エフェクトは、「Animate.css」ホバーアニメーションは、「HoverCSS」画像ホバーアニメ...

FASTCODING BLOG

【アニメーション特集 -4】JavaScriptアニメーション基本・作り方まとめ

こんにちは。FASTCODINGデザイナーの七転び八重子です。アニメーションをシリーズでまとめて見よう！第4回は、「JavaScriptアニメーション基本・作り方まとめ」です。CSSアニメーションについて、基本からおすすめライブラリをご紹介しましたので、今回はJavaScriptです。一見すると、難しいように思いますが、まずは基本を簡単におさらいしてみようと思います。目次 JavaScriptでアニメーションを作る！ function(関数)の書き方ステップ① CSSでアニメーション始めの状態を指定するステップ② C...

汎用系JavaScriptアニメーションライブラリ
専門系JavaScriptアニメーションライブラリ
まとめ

今回、ご紹介するのはQueryの依存なしのライブラリに限定し、ダウンロード数順にご紹介します。

Queryの依存なしを推奨する理由は、Queryと同じ機能をもち、はるかに高速でサポートも多いライブラリがありますし、バージョン管理が必要など、3年前くらいから脱Queryの流れがあります。

ですが、jQueryがダメと言う訳ではありません。
用途と使い方を間違えなければ、利用した方が便利な場合もあります。以下の２点を注意して利用しましょう。

jQueryを利用する場合の注意点
・ページの読み込み時点で実行するものは使わない（ユーザークリックやスクロール量で開始するアニメーションに利用）
・常に最新版を利用する

汎用系JavaScriptアニメーションライブラリ

標準仕様！Web Animations API

「Web Animations API」は、W3C Working Draftで定義されているアニメーションのための標準仕様です。
ChromeやFirefox、Safariで対応、今後の展望が期待できる技術なので勉強する価値があります。ブラウザ対応状況によって、現状ではPolyfillを利用することになると思います。

W3C Working Draft：Web Animations
ダウンロード：web-animations/web-animations-js

Anime.js

「Anime.js」は、軽く、高速で比較的かんたんに実装できるJavaScriptライブラリです。
GSAPやTweenJSに比べると同時実行性能が劣るため、多くのオブジェクトを一度に動かすのには不向きです。HTMLページのユーザーのアクションに対するフィードバックやステータスの変化などに利用するのが妥当です。