Icon animations

Timing is everything

The icon set for Green Dot's web presence was full of difficult and abstract representations of banking functions like “direct deposit”, “bank transfer” and “fee waiver”. When I was assigned to bring some life to the icons, I chose to focus my energy on the ones that already had a little life to begin with : "piggy bank", "alarm clock" and others that suggested motion.

I'm an old Flash guy from way back but as that technology falls from favor in the industry I've been glad to see that Adobe is teaching their old dog new tricks : it is now possible to create complex and subtle vector animations in Flash as always, but output to a tiny little JS file that runs right in the HTML of the page. As long as you keep things clean, the JS file is usually under 10k, and it's amazing what you can do with 50k.

Bye bye, SWF.


The animation was in some instances to work in conjunction with background video that set a very personable tone to the pre-login experience. There were also other little moments within the deeper content of the site where things spring to life.