Tag Archives: animation

最近のJS&CSSアニメーションライブラリまとめ

ふと仕事でHTML5アニメーションが必要になってきたので、少し調べてみました。

まずは、CSS3アニメーション vs JSアニメーションのパフォーマンスについて。以下のサイトでしっかり説明されています。
http://davidwalsh.name/css-js-animation

大雑把に内容を要約すると、以下のようなお話です。
– DOMを操作したJavaScript AnimationよりCSSの方が早い
– ただしCSSにも色々欠点がある(GPU負荷が大きい、ブラウザの対応とか)
結論: JavaScriptでアニメーションを最適化できるライブラリを使いましょう!

この記事で紹介されている最適化を施したJSライブラリはGSAPVelocity.jsです。大規模なアニメーションでない場合はVelocity.jsがおすすめのようです。

もちろん上記の他にも色々ライブラリは存在し、使用用途により最適なライブラリは変わってくると思います。今回は、いくつか現状のJS&CSSアニメーションライブラリについて所感も交えてざっとまとめてみました。

Continue reading 最近のJS&CSSアニメーションライブラリまとめ