Color Wheel Animation with CSS Filters

A few months ago I ran into the NSConf Argentina website by Aerolab and I instantly fell in love with those crazy gradients. My animation monster told me to animate them, so I set to work!!

First of all, how was the gradient in those buttons applied? A short trip to Dev Tools answered, it was border-image with a gradient. GREAT!

So I made a simple demo of those buttons: Continue reading

Storyboard Template… For your peace of mind

/* This is a side note of my story with animation, you can jump to the article instead.
I don’t think I ever… tweeted about this, but I’m currently studying for a BA in Multimedia and Interaction Design. That said, animation has grown on me since I was little, and at the age of 15/16 I finally began some out-of-school workshops on Stop Motions and… Web Design. Life took me into the later and I’m thankful for it, but lately I’ve been missing the Art of Animation, feeling that I was unable to fully put that into my daily web development activities. Until… Newton happened. It took me about one month to create that CSSConf AU talk and it opened my mind. I can do animations in the web, no more crying about it.
—————– */

In case you are not familiar with them, storyboards are a wonderful way of planning a recording session of any kind. Most of the time, our ego goes up to the sky and we believe that because the idea is inside our heads, the recording will be great. Our ideas are indeed great, but sometimes they don’t work out, why? Because ideas must be put to paper before realization, specially since recording can be expensive and/or take too much time out of our lives. That it’s the reason of storyboards, avoiding mistakes before they happen.

An storyboard is composed of a few keyframes of the animation/recording, in which we draw the type of shot (long shot, medium shot, close-up, etc.), the camera angle and the most important action that is going to happen in that take. Continue reading