Vue.jsに使えるアニメーションのライブラリ4つ

Vue.jsでアニメーションやりたいと思ったのですが日本語の記事がなかったので、書きます。

v-wave ... ウェーブアニメーション導入のためのシンプルなライブラリ

マテリアルデザインにあるリップルエフェクトを実装できるライブラリで、かなり更新頻度も高く、人気らしい。
Nuxt用の設定もあってラクラクに導入できそうです。

Website:
https://justintaddei.github.io/v-wave/

GitHub:
https://github.com/justintaddei/v-wave

VueAnimXYZ ... 何でもできて、イケてる感じ

AnimXYZが出しているVueバージョンのもの。

Website:
https://animxyz.com/

GitHub:
https://github.com/ingram-projects/animxyz

Vue Installation:
https://animxyz.com/docs/#vue-installation

vue-kinesis ... 色々な動きをつけられる

Website:
https://aminerman.com/kinesis/

GitHub:
https://github.com/Aminerman/vue-kinesis

vue2-particles ( vue3-particles ) ... 多機能だが複雑で面倒

Website:
https://particles.js.org/

GitHub:
https://github.com/matteobruni/tsparticles/tree/main/components/vue

おわりに

私は結局-waveに落ち着きました。
他のライブラリは何でもできる感があって逆に萎えちゃいました。

実際、リップルエフェクトのウェーブがあれば大概のアニメーション需要に応えられるかもしれません。だからv-waveはずっと人気なのかも。

感想はかなーり主観的な私個人の感想が入っているので、ちゃんと検討したい方はそれぞれしっかりみてみると良いと思います。