Maximillian Laumeister

Feed Derpy

CSS sprite sheet animation demo
https://www.maxlaumeister.com/feed-derpy/

Screenshot of FeedDerpy.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.