CSS Animatatatons | Skillshare Projects

Sajid Reshamwala

Better anything than boring.



CSS Animatatatons

Our startup (Jut.io) 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.