Hacker News new | past | comments | ask | show | jobs | submit login

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.




> allocates lots of typed arrays

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


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

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


Similarly, PhysicsJS employs a "scratchpad" of pre-initialized vectors for fast intermediate computations. That way you aren't constructing new objects, but grabbing a free one, zeroing it, and using it as you would before. Seems quite performant.

https://github.com/wellcaffeinated/PhysicsJS/blob/master/src...




Consider applying for YC's W25 batch! Applications are open till Nov 12.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: