Show HN: Snabbt.js – a minimalistic animation library

http://daniel-lundin.github.io/snabbt.js/cards.html

by sBUWK • 12 years ago

323 47 12 years ago

daniel-lundin.github.io

Touche• 12 years ago

This looks amazing.

cannonpult• 12 years ago

Those crazy sticks are crazy!

habosa• 12 years ago

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.

mattdesl5• 12 years ago

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• 12 years ago

allocates lots of typed arrays

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

yesimahuman2• 12 years ago

Translation, rotation, scale, and opacity are the fastest things to animate in the browser. The GPU can be employed and the browser does not need to recompute layouts and reflow. Doesn't work for everything (without building layout systems in JS), but can be used for quite a lot of animations.

leeoniya• 12 years ago

what makes is fast is the use of requestAnimationFrame [1] (rather than setTimeout or setInterval) that exists in all modern browsers and simply applying css, letting the browser handle and GPU-accelerate as it sees fit. the only thing the js does is compute the matrices for each step/frame in fixed-length typed arrays.

[1] https://github.com/daniel-lundin/snabbt.js/blob/master/src/m...

bzalasky• 12 years ago

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

baskind• 12 years ago

Velocity.js http://julian.com/research/velocity/ is pretty damn good already and just 12kb Gzipped.

paulrosenzweig• 12 years ago

This is under 4kb.

mattdesl5• 12 years ago

Competition is healthy. :) https://www.npmjs.com/package/tweenr

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

jbeja2• 12 years ago

Impressive.

grandalf• 12 years ago

how would one do the equivalent of the createjs timeline?

hayksaakian• 12 years ago

Very fluid on my phone too!

(Nexus 5 on lollipop)

bsimpson2• 12 years ago

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.

jplahn2• 12 years ago

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• 12 years ago

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.

bsimpson2• 12 years ago

I'm a big believer in consistent, readable codebases. Anything that doesn't make it easier to understand and improve the code shouldn't be occupying your headspace. You should never have to answer "now why didn't that work" with "I was supposed to use with_scale instead of withScale."

There are of course languages where the ecosystem itself is inconsistent (like PHP) or there are no conventions to follow (like CSS). In those cases, use whatever's your favorite; however, if you are snake_casing JavaScript or camelCasing Python, you're doing it wrong.

If you're the only one who ever touches your projects, it doesn't matter, but for anyone who has to work with your codebase, you've created a pain-in-the-ass for no good reason.

sillysaurus3• 12 years ago

Those things don't matter, though. Especially for anyone who has a passing familiarity with matrix operations.

fourstar• 12 years ago

What a pedantic case for #1. Wow. Seriously?

supster• 12 years ago

Jaw dropping demo, great work!

mattdesl5• 12 years ago

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.

jbeja2• 12 years ago

How manipulate the DOM without reading it actually work?

thomasfoster96• 12 years ago

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.

mackeian• 12 years ago

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

GordyMD• 12 years ago

This is incredibly impressive. Thank you for sharing.

wingerlang• 12 years ago

"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• 12 years ago

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

danatkinson• 12 years ago

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

rsp1984• 12 years ago

This looks very similar to http://famo.us/. What is the main difference of Snabbt.js as compared to famo.us?

thomasfl• 12 years ago

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/

Source https://github.com/StephanBijzitter/Famous-Material-Examples

burger_moon• 12 years ago

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• 12 years ago

Unfortunate name similarity with “Snabb Switch”, as featured here on HN six months ago:

https://news.ycombinator.com/item?id=8008963

leventcemaydan• 12 years ago

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

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

Show HN: Snabbt.js – a minimalistic animation library

Related Stories