Anime.jsとは？
Anime.jsは、軽量で直感的に使えるJavaScriptアニメーションライブラリです。
DOM・SVG・CSSプロパティなどを自在にアニメーションさせることができ、GSAPの代替としても人気急上昇中！
特にWeb制作で「動きにこだわりたい」人や、ポートフォリオ・LP・ブランドサイトなどで表現力を出したい人に最適です。
アニメーション例
See the Pen anime1 by mori (@pdadmjrq-the-reactor) on CodePen.
アニメーション説明
このデモでは、5つのカラフルなボックスを横並びに配置し、それぞれにアニメーションを加えています。
CSSでは、ボックスの初期状態を「透明・縮小・回転なし」に設定。中央に配置し、色やサイズを整えています。
JavaScript（Anime.js）では、各ボックスに対して以下の動きを適用しています：
・スケール：小さく始まり、少し大きくなってから通常サイズに戻る。
・回転：360度回転して動きを強調。
・透明度：0から1へ変化しフェードイン。
・遅延：中央のボックスから順に動き出すように設定。
・イージング：跳ねるような自然な動きに調整。
全体として、ポップで弾むようなアニメーションを実現しています。
カスタマイズ例
・translateX, translateY：位置をスライド
・backgroundColor：色を変える
・loop: true：無限ループにする
・イベント連動：クリックやホバーで発動
・SVGアニメ：パスの描画・モーフィングも可能！
まとめ
Anime.jsは、シンプルな構文でハイクオリティなアニメーションを実現できるパワフルなライブラリです。
・GSAPより軽量で簡単
・クリエイティブな演出が可能
・幅広いWebプロジェクトに応用可能
アニメーションを武器に、サイトに“魅せる力”を加えたいなら、まずAnime.jsを触ってみましょう！