snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements.
By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.
snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.
Note: For convenience, width and height are animatable too, but beware since they may cause page reflows and slow down your animations.
Limitations
All transforms work on pixels or radians. Any unit conversion has to be done beforehand.
No arbitrary property animations, e.g. colors, padding, margin or line height animations.
For performance reasons, snabbt never queries the DOM. This means that in some cases you need to transforms yourself.(Specifically when using value feeding)
snabbt.js needs requestAnimationFrame and matrix3d to work, so no IE < 10
Usage
Animations are started with the snabbt-function call. The function takes an element as first parameter(or list there of) and a configutation-object as second.
snabbt(element, {
position: [100, 0, 0],
rotation: [Math.PI, 0, 0],
easing: 'ease'
});Chaining
Animation can be chained by using `snabbt()` on the returned animation object. All fromXxx properties will be set to the end state of the previous animation.
snabbt(element, {
position: [100, 0, 0],
easing: 'ease'
}).snabbt({
fromRotation: [0, 0, -2*Math.PI],
position: [0, 0, 0],
easing: 'spring',
springConstant: 0.2,
springDeceleration: 0.90,
springMass: 10,
});Make it stop
Animation can be stopped at any time by replacing the animation configuration with the string literal 'stop':
snabbt(element, 'stop');If a new animation is started with the same element it will start from the stopped position unless the 'from'-properties are used.
Demos
Check out some of the demos to see the capabilities of snabbt.js:
Download
https://github.com/daniel-lundin/snabbt.js/releases