Force.jsはページ上の要素を手軽にアニメーション化させることができるJSライブラリです。CSS transitionを活用し、さまざま動きが表現可能です。ちなみに、Force.jsは100%ピュアvanillaとのこと。
Force.js
以下、Force.jsの詳細ページです。実際のデモも用意されています。
Exampleというところでデモ動作を確認することができます。「Hit tha ball!」にある黒丸をクリックすると動き出します。
右側にある「Easing Functions」という項目から、好きなEasingの種類を選択できます。Easing機能には、swing、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuartなどなど、たくさんの種類が用意されています。
いろんな動作を試しながら、自分好みEasing機能を見つけてみてはいかがでしょうか。
Durationから速度を変更することも可能です。ライセンスはMITとのこと。
というわけで、要素を手軽にアニメーション化させることができる「Force.js」のご紹介でした。
