Sprite sheet animation tutorial with HTML and CSS 

Hey, thanks! Performance will totally depend on your use case and needs for the game project. The game I've used this in did okay with 15+ moving characters on screen at once, but I never needed to show more than that. If you had way more, I could see this falling apart and canvas would be a better choice. I once made a proof of concept to see at what point the browser chokes up: cdpn.io/punkydrewster713/debug/KdjOGr (This isn't a perfect test because nothing else is running in the game, but it was fun to see) That said, I've personally ran into some bad canvas perf on older phones and tablets, so it really depends on the kinds of browsers and devices you want to support. I don't think there's a right or wrong answer, it just depends on your project's needs. Thanks for the great comment!

@@DrewConley thanks for your reply! I'll take a look on your project when I have some time. I'm not an expert in CSS, but if I'm not wrong you can use the "background-position" property to obtain the same crop effect. Wouldn't it be more performant, since you don't have one element inside another, but instead you have the browser doing a real "bitblt" operation? Also I don't know if this property can be animated directly with CSS or just JS

I will look into it!

For this particular asset, an SVG would probably be fine because the character is pretty simple. In my experience with Danger Crew, the artwork started getting more detailed and therefore was so much data in the SVG that the file sizes were huge. The png approach here allows the asset to stay nice and tiny.

@@DrewConley Thanks, I've just started working with SVG's so I dont really know much about how they scale up in image complexity I just figure it should allow scaling the image to any size you want and theres a lot of scenarios where you would want that

Really great question! For whatever reason, I've pretty much only used equal sized frames in my games, so I don't have any real experience here. I'd imagine you'd need to manually specify the dimensions of each frame somewhere in the code. From there, I guess the cropping container's size would need to be adjusted per frame. Also have to be careful that the character doesn't jump around too much... may need some kind of nudge value to make sure the animation lines up, etc. Honestly it feels like less work to just edit the sprites into equal frames. I know a lot of sprite ripping sites don't take the time to do this, so it's time consuming but probably worth the effort long term. Let me know if you try it!

I use Aseprite. It’s an amazing program!

Why dont you just go and find those, there are many on yt already. Then, if you want apply this kind of animation.

Hey same issue here! You ever figure this issue out?

Hello! The png must be exported with a transparent background. It’s a detail baked into the image file. Unfortunately, you will probably need to find a different png that is already transparent... or pull the existing one into an image editor and delete the bg pixels manually. Might leave artifacts around the sprite edges, though, so I recommend finding an originally transparent image. Good luck!

@@DrewConley Thanks for the feedback Drew.

It depends. Both ways are useful!

*I added my character to a character controller div and then added the item anchor div to the controller as well, I would nest it directly on the character but the overflow hidden