HTML5登場以降、JavaScriptやCSS3を使ったアニメーションが人気になっています。一言でアニメーションと言っても様々で、イラストを使ったものもあれば、単純にテキストやDOMを動かすと言った類のものもあります。 今回紹介するsnabbt.jsは後者のシンプルなアニメーションライブラリになります。クリックやマウスオーバー時などにアニメーションさせるのによさそうです。

snabbt.jsの使い方

サンプルです。クリックでアニメーションします。

もうちょっと高度なアニメーション。こちらはDOM操作です。

snabbt.jsを使えばイラストなどを描くことなく、ユーザ操作に連動したアニメーションが手軽に実現できるようになります。jQueryと連動して使うことも、切り離して使うこともできます。例えば次のような記述になります（jQueryを使わない場合）。

snabbt(element, {
  position: [100, 0, 0],
  rotation: [Math.PI, 0, 0],
  duration: 1000,
  delay: 100,
  easing: 'ease'
});

メソッドチェーンを使うと複数のアニメーションを次々と実行することができます。

snabbt(element, {
  position: [100, 0, 0],
  easing: 'ease'
}).then({
  from_rotation: [0, 0, -2*Math.PI],
  easing: 'spring',
  spring_constant: 0.2,
  spring_deaccelaration: 0.95,
});

アニメーションというと独特なコードが並んでメンテナンスが大変になるイメージがありますが、snabbt.jsは見た目もすっきりしたコードで分かりやすいのではないでしょうか。

snabbt.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

snabbt.js snabbt.js daniel-lundin/snabbt.js