Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

How did they make the header loading animation ? Seems to be using canvas but I don't get how it works.



According to the source code, this works using a few things. The main thing powering this is Pixi.js, a 2D HTML 5 Canvas/WebGL renderer: https://github.com/pixijs/pixi.js/

It tracks your mouse, or touch event. Whenever you move, it accumulates a number (search "mouseForce") to the nearby pixels. This number is then used as an index into a sprite sheet[1][2]. It uses Pixi's MovieClip object for the heavy lifting, but they create their own Tile object to hook the mouse force to the sprite sheet.

So to sum up, they create a grid of Tile objects, each of which accumulates a number based on nearby mouse/touch movement, then uses that number to index into a sprite sheet rendered by Pixi.js.

[1] http://googlecreativelab.github.io/anypixel/img/x_03.png

[2] The sprite sheet is white-on-transparent, so it's invisible in Chrome. Here's a screenshot: http://i.imgur.com/rKDrSoP.png




Consider applying for YC's Fall 2026 batch! Applications are open till July 27.

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

Search: