← View All Projects

Feed Derpy
CSS sprite sheet animation demo http://www.feedderpy.com/

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

FeedDerpy.com 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.