Post

What's the benefit of using a sprite sheet for this rather than a video?

Mainly I wanted to try the sprite technique😄 This gives creative control tweaking the animation in post with CSS. Changing FPS, rescaling the pixel-art with `image-rendering: pixelated;` keeps it crispy looking. I also have user interaction ideas for the sprite, I imagine extend nicely with sprites.

Fair! Although image-rendering works with video too. I guess a "hard mode" solution would be to use the video decoder API to pull out the frames, then you could draw them to a canvas at will, but still have the benefit of video compression.

Was inspired by this article to try a spritesheet animation: @joshwcomeau.com www.joshwcomeau.com/animation/sp...

I initially used the technique from the article. To animate the `object-position` which I liked a lot, and since my animation was so long I had to wrap it to multiple rows so as to not exceed WEBP maximum width, which required me to move the sprite's X and Y frame position at separate intervals.

I got it working on Chrome by doing 2 animations on the position values of the custom properties for the X and Y values. Sadly I had to switch last minute to a better supported method of `overflow: hidden` + `translate` as I noticed that Firefox did not like my way of animating the variables 😵