Article
snabbt.js — minimalistic JavaScript animation library
Snabbt.js is a new simple and fast JavaScript animation library. It is minimalistic — 4 KB (minimized and gzipped) — and according to its author, focuses on "things that modern browsers can animate cheaply: transforms and opacity". Snabbt uses CSS3 transforms for animation.
Animating elements with snabbt.js
Snabbt is very easy to use: you callsnabbt function, passing element to animate as the first argument and options object as the second argument:
snabbt(element, {
position: [100, 0, 0],
rotation: [Math.PI, 0, 0],
duration: 1000,
delay: 100,
easing: 'ease'
});
Progville
Code for this example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Snabbt.js Demo by Progville</title> <script src="//cdnjs.cloudflare.com/ajax/libs/snabbt.js/0.3.0/snabbt.min.js"></script> </head> <style> #progville { width: 100px; margin: 30px; padding: 5px 10px; border-radius: 3px; background-color: navy; color: white; font: 20px"Helvetica Neue", Arial, Helvetica, sans-serif; text-align: center; cursor: pointer; } </style> <body> <div id="progville">Progville</div> </body> <script>You can chain animations by callingvar elem = document.getElementById('progville'); elem.addEventListener('click', function () { snabbt(this, 'attention', { rotation: [0, 0, Math.PI / 2], springConstant: 1.9, springDeacceleration: 0.9 }); }); elem.click();<script> </html>
then on the returned object:
snabbt(element, {
position: [100, 0, 0],
easing: 'ease'
}).then({
fromRotation: [0, 0, -2*Math.PI],
easing: 'spring',
springConstant: 0.2,
springDeaccelaration: 0.95
});
Using snabbt.js with jQuery
Snabbt doesn't have any dependencies, and doesn't require jQuery. However if it detects that you use it, Snabbt.js installs itself as jQuery plugin, so you can also call it like this:$element.snabbt({
position: [150, 0, 0],
rotation: [0, 0, Math.PI],
});