
Show HN: Snabbt.js – a minimalistic animation library - sBUWK
http://daniel-lundin.github.io/snabbt.js/cards.html
======
habosa
Extremely impressive demo. This is how a Show HN for a front-end library
should always be: take me straight to a demo of the coolest part.

What exactly makes this so fast? I'm not familiar enough with JS/CSS to know
from the code. The 200-element sticks demo was by far the smoothest animation
I have ever seen for that many elements.

~~~
mattdesl
JS animations are inherently very fast, most likely because you're running a
modern browser. :)

The code is basically just computing a 4x4 matrix for each card per frame
built up from some tweened position/rotation/etc. Then it applies the matrix
to the element's CSS. The code doesn't look optimized (ie allocates lots of
typed arrays) but as the demo proves, its already pretty fast.

~~~
Kiro
> allocates lots of typed arrays

Out of curiosity, can you show an example and how it should be done properly?

~~~
mattdesl
A better approach is to re-use arrays instead of creating intermediate ones,
which is what gl-matrix[1] advocates. Each tween might still need its own
matrix instance for start and end points, but at least these are not created
per tick.

A similar approach is to use a "pool" of arrays[2] which allows you to re-use
them without having to manually keep track of the temporary arrays.

[1] - [https://github.com/toji/gl-matrix](https://github.com/toji/gl-matrix)

[2] - [https://github.com/mikolalysenko/typedarray-
pool](https://github.com/mikolalysenko/typedarray-pool)

------
wingerlang
"Snabbt" is Swedish, and means "fast".

(I've translated a couple of these Swedish named things on HN over the past
time, I hope it's not off topic)

~~~
huskyr
I was puzzled by the name, thanks for pointing this out!

------
bsimpson
The demo is certainly impressive, but the API doesn't look very idiomatic:

\- JS is a camelCased language. While I certainly appreciate snake_case in
Python, it doesn't belong in a JS library.

\- The Matrix APIs are needlessly terse. rotate, multiply, translate, and
identity are only a few characters longer than your choices, but they're
oodles more intuitive and easier to read.

~~~
jplahn
Maybe I'm just naive (probably), but is it really that off putting that the
casing convention isn't the same?

To be honest, I don't know what most languages "are" with regards to the
casing convention..and I've never been explicitly told what they should be
either.

~~~
fivedogit
I was once turned down for a coding job based on stylistic complaints with my
code, one of which was that I used snake_casing instead of the (apparently
preferred) camelCasing in Java.

Since then I've resolved myself to the fact that in almost all things CS,
there are many different ways to get to the final answer or finished product
and _your_ way of doing it is fine if it gets the job done in a timely manner
while minimizing future complications. Anyone claiming a "right way" to do
something at the level of irrelevant casing either has a larger organization
to worry about in terms of code readability, etc and is therefore justified if
your project is meant to be shared with others OR is professing code piousness
as a way to stroke their own ego.

~~~
mattdesl
I don't think it's reason to turn somebody down, but it can be fairly annoying
using a library that doesn't follow standard naming conventions. If your code
brings together four different libraries and they all use drastically
different conventions (case, wording, parameter style, etc) it can quickly
lead to a messy and difficult to maintain codebase.

~~~
jplahn
Fair enough, I can definitely see that being an annoyance. Especially in the
context of this being a light library, it's undoubtedly going to be utilized
with any number of other libraries. Good point.

------
baskind
Velocity.js
[http://julian.com/research/velocity/](http://julian.com/research/velocity/)
is pretty damn good already and just 12kb Gzipped.

~~~
mattdesl
Competition is healthy. :)
[https://www.npmjs.com/package/tweenr](https://www.npmjs.com/package/tweenr)

Besides, different authors will tackle the problem a little differently.

------
thomasfoster96
I have to say, I'm glad I can now build a house of cards using JavaScript.
I've tried and failed too many times in real life.

------
rsp1984
This looks very similar to [http://famo.us/](http://famo.us/). What is the
main difference of Snabbt.js as compared to famo.us?

~~~
thomasfl
Obviously famo.us is more famous than snabbt.js. But seriously, they both do
the same thing. Instead of using css transitions they both use request
animation frames and then only do the transformations that are fast to do. The
main differences is the size of Snabbt, which only does animation, and Famo.us
which handles touch events has a larger physics engine and more utility
functions.

There are efforts being done to implement parts of Material design using
famo.us:

Demo [http://skelware.com/famous-material/demo/1/](http://skelware.com/famous-
material/demo/1/)

Source [https://github.com/StephanBijzitter/Famous-Material-
Examples](https://github.com/StephanBijzitter/Famous-Material-Examples)

------
mattdesl
Nice library.

The current implementation leads to a lot of garbage since you are allocating
several typed arrays per tick for each tween.

Also looks like gimbal lock and Euler interpolation could be a problem for
some 3D rotations. I guess fixing that would lead to extra complexity.

------
burger_moon
Really impressive! I like this a lot. One thing I noted however, was when I
resize and refresh to a smaller browser size the squares turn into long
rectangles. Is there a way to make them scale together so they stay as a
square in a narrow view?

------
teddyh
Unfortunate name similarity with “ _Snabb Switch_ ”, as featured here on HN
six months ago:

[https://news.ycombinator.com/item?id=8008963](https://news.ycombinator.com/item?id=8008963)

------
danatkinson
An impressive demo, but I'd like to see this being done with photos of varying
quality and see how the performance fairs. I've got a Chrome extension that I
could probably use this with...

------
mackeian
Nice demo dude! And indeed it's really fast. Well done and thanks for sharing.
Will try this out.

------
leventcemaydan
These are awesome animations! I'll add this to Toolyo.

I'm creating a new category for these kind of items :)

------
bzalasky
This looks great at a glance. Looking forward to tooling around with it this
weekend.

------
GordyMD
This is incredibly impressive. Thank you for sharing.

------
Touche
This looks amazing.

------
hayksaakian
Very fluid on my phone too!

(Nexus 5 on lollipop)

------
supster
Jaw dropping demo, great work!

------
cannonpult
Those crazy sticks are crazy!

------
grandalf
how would one do the equivalent of the createjs timeline?

------
jbeja
How manipulate the DOM without reading it actually work?

------
jbeja
Impressive.

