Maximillian Laumeister

Feed Derpy

CSS sprite sheet animation demo

Screenshot of

Featuring custom animation 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 is available on GitHub under the MIT license.