Feed Derpy
CSS sprite sheet animation demo
https://feed-derpy.maxlaumeister.com/
Featuring custom animation
FeedDerpy.com features an interactive sprite sheet animation of a cartoon character named Derpy Hooves eating muffins. To feed muffins to the pony, the user clicks the basket of muffins near the top of the screen. I created the animations in Adobe Illustrator using existing artwork as a base and guide, and stitched the interactive animation together using JavaScript and CSS sprite sheet techniques.
Tech Stack
Feed Derpy was created from scratch using HTML, CSS, and vanilla JavaScript. The sprite sheet animations re-use frames from the master sprite sheet as part of several animation subroutines. The source code that powers FeedDerpy.com is available on GitHub under the MIT license.