Webの表現力が向上しているのを実感できるものの一つにアニメーションが挙げられます。これまではFlashであったりJavaScriptで無理矢理DOMを動かしていましたが、CSS3やSVGによってスムーズなアニメーションが実現できています。とは言え、アニメーションを作るのは大変です。 今回は軽量なアニメーションライブラリ、anime.jsを紹介します。

anime.jsについて

デモを紹介します。まずはHTMLタグによるアニメーション。

こちらはSVGを動的に書き換えてアニメーションさせています。

こちらもHTMLを書き換えています。レスポンシブで、ウィンドウ幅によって描かれ方が変わるのが面白いです。

ログインフォームにアニメーション。

文字が落ちてくるアニメーション。

スクロール連動型アニメーション。

有機的なアニメーション。

スライダーと画像を組み合わせたデモ。

テキストアニメーション。

anime.jsは実に多彩で、HTML/CSS/SVG/JavaScriptオブジェクトなど様々な要素でアニメーションを実現できます。DOMの場合は重なり具合もサポートされていたり、キーフレームベースのアニメーションも簡単に実現できます。何より軽量というのが売りになっており、使いやすいライブラリとなっています。

anime.jsはJS製のオープンソース・ソフトウェア（MIT License）です。

anime.js • JavaScript animation engine juliangarnier/anime: JavaScript animation engine