’m really excited to be launching Animaticss, a little side project I’ve been working on for the past few weeks. I love focused, fast software. Software that serves one single purpose, but does it with a simple and delightful interface. That’s the kind of software I wanted to build with Animaticss. If you’ve worked with me, you know how much I love using little animations and microinteractions to add a little bit of joy into my work. In my web projects, most of those have been implemented using CSS sprite animations, but writing the code for them has always been a frustrating step in the process — translating frames per second into timing functions, figuring out how many steps in the animation… there was just too much trial and error. That’s how the idea of Animaticss was born: a webtool to preview and generate code for CSS sprite animations. Simple and focused. A tool that I built for myself, but one that will hopefully provide some value to others as well, even if just in proving that this method is a viable and lightweight way to add some life to your web projects. And even if most of what I wrote above means very little to you, you can still visit and hopefully enjoy the built-in demo animations — how many can you spot?

Animaticss

Quickly preview and generate code for sprite animations

Quickly preview and generate code for sprite animations