Friday, May 28th, 2010

Rounded corners. Moving.

Category: Animation, Graphics, UI

Chris Vanrensburg: “In a similar vein to a recent experiment with animating position, I wanted to see how curves could be applied to animating size changes for an object. To be expected, applying different interpolation curves for the width and height CSS style properties produces some fun effects (to be seen towards the bottom of the list of presets).”

The Web 2.0 crowd love their rounded corners. How about animating them! This is where Chris takes his latest experiment. Click around in the demo area and watch the smooth effects.

Posted by Dion Almaer at 5:41 am

3.7 rating from 12 votes


Comments feed TrackBack URI

That looks like a lot of fun, but I’d hate to see it used in a navbar (which it will be very soon I imagine).

Comment by Skilldrick — May 28, 2010

Works in FF nightlies

Comment by jamienk — May 28, 2010

Easy to waste time on this, there are so many presets to try.

Comment by McDaid — May 28, 2010

This is a demo for animation curves, not corner curves. He’s just animating the size of the element, which just happens to have rounded corners.

Comment by MattCoz — May 28, 2010

Wow this is an awesome library!

Comment by voidmind — June 2, 2010

Leave a comment

You must be logged in to post a comment.