Riffing on the curves work that I did recently, I tried to see what juicy effects could be produced by taking some boring old CSS and throwing a few curves at it. Now, you can do some pretty fun things when you get non-linear. We’ve all seen the JavaScript animation effects where you animate the value of a CSS style property over time. It gets a little more interesting when you start animating several CSS style properties over time – but still not interesting enough for me (I have an appetite for the strange).Work that I did around animation made it possible to animate multiple CSS properties in the same animation, but then also provide different curves for the different properties being animated. So, if you’re animating background color and border color at the same time, why do they both have to transition at the same pace – or in the same manner? Sure, you can throw an easing equation on the entire animation, so things get bouncy and stuff, but that’s still not interesting enough. What if it were easy to make the border color animation bouncy, and the background color animation an ease-in? Now things start looking interesting. And what if you could even… prepare yourself now… provide different curves for different components of color values?!?!? That would just be insane! So, of course, I went and tried it. Result: beauty. It’s truly lovely to see different animations that all have the same start settings and that all have the same end settings, but that feel wildly different because of the curves that govern what happens between point A and point B. Example: you fade the border color from black to white. OK, so somewhere in the middle it’s gray, right? WRONG! Not when you’ve got some juicy curves doing different things for red, green, and blue.
I put together a little example to demonstrate what happens when you go and get non-linear on animation’s ass. It’s a demo of the hover fader widget that is being used to create animated menu effects. Yeah, pages get sticky when people spend five minutes just tickling a nav menu repeatedly to see pretty colors. Hey, I won’t vouch for all of the settings I came up with: some of them are just outlandish and should NEVER be used on any Web site, or risk getting a knock on the door from the usability police. But, then again, life is too short to be boring. One should use the awesome power of curves wisely.
PS: Some of my favorites are “A Fading Fusion of Fuchsia and Morning Glory”, “Spectral Background Fade Out”, “Prismatic Border”, “Gold Ingots”, and “Aqua Border, Oscillating Tail Slows Down Towards End”. But, they’re all kind of fun. And this is just what I could come up with, with a little bit of tooling around and imagining what curves might produce what kinds of effects.
http://www.uize.com/examples/hover-fader-color-effects.html
