I'll have to try some more stuff out with video elements too. I haven't dug that rabbit hole deep enough yet 😄

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.

Blender Tutorial - Pixel Art with Dithering (Graduated Shadows) YouTube video by Point Cloud

The shader material based on this:
www.youtube.com/watch?v=sHwd...

“Built with Eleventy” Animated 88x31 I was tagged several days ago on Mastodon, as someone was looking for a "90s-style 88x31 footer GIF" for pages built with Eleventy, and [... I] gave animating the badge a shot!

Learned about `image-rendering: pixelated;`
From @chrisburnell.com chrisburnell.com/note/elevent...

CSS Code snippet for a single spritesheet animation where the animation frames have been wrapped on multiple rows. Utilizing two custom properties and keyframe animations for spritesheet frames X and Y coordinates.

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 😵

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.

Sprites on the Web • Josh W. Comeau In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web these days. Which is a shame, because we can do some pretty cool stuff with sprit...

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

Made this 3D animated puppy that I rendered into a 2D 1-bit style spritesheet CSS animation for my website. Weekend project went a bit overtime, but had to get it done before I'm off travelling 😪

Really beautiful work 🙌

This website is a definitive hype builder 😆🙌