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.

235

--

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:

07018693

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

9a792862

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:

http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps

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

https://draeton.github.io/stitches/

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

http://codepen.io/rambolee/pen/yYazRQ

cb61da64

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):

444d89cf

2 - recieving data (walking)

9b1ddfe7

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

4cb88b2e

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):

010bb53c

2 - recieving data:

68b8c5c2

and 3 - error:

eb30a28f

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:

http://codepen.io/rambolee/pen/YypPad

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

4c29f712

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:

waiting:

c026b659

2 - recieving data : 

f4e8eb4f

and then finally 3 - recieving an error

40093e1e

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!

e14d86b0

Comments

Please sign in or sign up to comment.