JavaScriptアニメーションライブラリー5選

Webページやアプリに躍動感を吹き込むWebアニメーション、今回は簡単にアニメーションを作るのに役立つJavaScriptアニメーションライブラリー5つを紹介します。

TypeIt

公式：https://www.typeitjs.com/

ポイントフレーズを活かせるテキストタイピングアニメーションです。このライブラリーを使用するとタイピング効果を簡単に実現することができます。

See the Pen
TypeIt test by ryusinei (@ryusinei)
on CodePen.

SrollOut

公式：https://scroll-out.github.io/

CSS属性や変数を使い手軽にアニメーションをつけられます。1kbもいかない非常に軽いライブラリーであるし、どんなフレームワークを使っているとかには関係なく部分的に適用できるため、プロジェクトにも負担がないです。

See the Pen
Untitled by ryusinei (@ryusinei)
on CodePen.

rellax

公式：https://dixonandmoe.com/rellax/

ページをスクロールする時、要素毎に異なる速さでスクロールされるように調整することができます。rellaxオプジェットを生成するだけでデフォルトの速さでスクロールされます。

See the Pen
Untitled by ryusinei (@ryusinei)
on CodePen.

GSAP-greensock

公式：https://greensock.com/

公式サイトを見ると「開発者をアニメーションヒーローにしてくれるライプラリ」と書いていて、それほど強力なライブラリーでできることが多いので、余裕を持って一個づつやってみたら良いかと思います。

See the Pen
ScrollOut test by ryusinei (@ryusinei)
on CodePen.

animejs

公式：https://animejs.com/

シンプルでありながら強力なAPIを備えた軽量のJavaScriptアニメーションライブラリです。 CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトで動作します。ドキュメントもよくできていますので、どんなアニメーションができて、それを実現するためにはどんなコードを作成すればいいのかもすぐ確認できます。

See the Pen
Porduct delivery status card for website by Aryankapoor (@codewitharyann)
on CodePen.

見て楽しい、作って楽しいアニメーションが簡単に作れて、しかも軽いライプラリでした。今後のWebサイト制作でも活用できればと思います！

Author Profile