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 call snabbt 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'
});

Here’s it is in action. Click on “Progville” to see animation:

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>var 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>

You can chain animations by calling 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],
});

Snabbt demos

There are demos available on Snabbt.js website (click on buttons to see them animate), and also the author provides two demos: Cards (on the video below) and Crazy Tricks.

Website, source code and license

Website: https://daniel-lundin.github.io/snabbt.js/
GitHub: https://github.com/daniel-lundin/snabbt.js
Author: Daniel Lundin (@danielundin)
License: MIT