Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Sajid Reshamwala

Better anything than boring.



CSS Animatatatons

Our startup ( is building a data analytics tool for developers, and, after playing around with making a css version of this guy initially, I thought this project was a great chance to bring some delight into the product. Our tool helps you build dashboards so, I figured, what if you could have a character on your dashboard that tells you a bit about your data instead of just numbers?

We had a hackday the other day and I teamed up with one of our D3 developer/designers to see what we could get working. First, we defined three simple states that we could use to try out our data: 1- you're dashboards not recieving any data 2 - your dashboard IS recieving data and 3 - you have an alert. In the end, we got an animated jut monster into the product roadmap! here's what he'll look like in the app:


First, I finished up the project tutorial and prototype. Great tutorial, got through it in 3ish hours:


Next I found this tutorial from treehouse on animating sprite sheets with CSS This gave me a start for building the animation into our app:

Exported my frames from illustrated into a sprite sheet using this web app.

Then created a code pen with a pen function. Got a proof of concept up!


For our first proof of concept, I wired up my version of the fat man (bubba jut) to our program to see what we could get to work, and made three simple character animations:

1 - no data (waiting and bobbing his head):


2 - recieving data (walking)


and 3 - an error (jumping up and down):


next, to please the big data game making crowd, I tried it out with an old faithful standby:

1 - no data (a non-descript yellow ball):


2 - recieving data:


and 3 - error:


I also worked up a version of our big yellow man when there's too much data here in css, you can see it here:

Lastly, it was time to make something bespoke. enter the jut-monster. did some ideation and iteration first:


but i wanted something that could be active yet understated when the dashboard was getting data. so i did a little tweaking and got here:



2 - recieving data : 


and then finally 3 - recieving an error


Now I've just got to see how I can make him a bit more stable for in product use. I'll keep you guys updated!



Please sign in or sign up to comment.