Pixel-art animation powered by css with a sprite created by Compass.

In this article I’m going to share my experience in creating a simple pixel-art animation, which I gave as a new year present to a good friend.

pixel art animation with sass sprite , mayenok.com

Don’t wanna read, just show me the result


I used Adobe Photoshop CC, but I believe that any version is OK.

Go to Window > Timeline : a timeline will appear at the bottom of the window.

Switch to a frame view by clicking on the frames icon (at the left bottom corner of the timeline panel). Now you see the first frame and if you want to create another one - press Duplicate selected frames icon (located at the bottom of the timeline panel).

Now start drawing. I used layers and changed their visibility for different frames. My psd file is available in my repository as a reference.

Read more