Tuesday, September 21st, 2010

Animating With Firefox’s mozRequestAnimationFrame

Category: Animation, Firefox

Firefox 4 is going to be a very exciting release. Robert O’Callahan details one of the new features, which should help animation, called mozRequestAnimationFrame. First the motivation: In Firefox 4 we’ve added support for two major standards for declarative animation — SVG Animation (aka SMIL) and CSS Transitions. However, I also feel strongly that the Read the rest…

Posted by Brad Neuberg at 7:00 am
1 Comment

2.8 rating from 19 votes

Monday, September 13th, 2010

Animated CSS3 cube using 3D transforms

Category: Animation, CSS

I’ve been doing alot of experimenting with HTML5/CSS3 on the iPhone doing animation, and I’ve been surprised with the low frame rate of animating through Canvas or SVG. If you are trying to do animation, especially 3D, on the iPhone it seems like the name of the game is to it through the GPU, and Read the rest…

Posted by Brad Neuberg at 6:00 am
Comment here

3.2 rating from 13 votes

Tuesday, August 24th, 2010

Blow Things Up!

Category: Animation

Jonas Wagner has ported the Flash 2D physics engine Box2DFlash to JavaScript: In his demo Jonas uses the Canvas tag to map the physics simulations on. Click on it to create explosions: Jonas talks about the approach he used to convert the original library from ActionScript to JavaScript: At first I thought this conversion would Read the rest…

Posted by Brad Neuberg at 5:00 am

3.3 rating from 19 votes

Monday, June 14th, 2010

animateWithCSS: Aza’s jQuery Plugin

Category: Animation, CSS

< View plain text > javascript // Makes all paragraph elements grow a border and then atrophy away. $("p").animateWithCSS(   {border: "5px solid #555"}, // CSS properties to animate   1000,                       // Duration in ms   "cubic-bezier",        // The timing function Read the rest…

Posted by Dion Almaer at 5:36 pm

2.9 rating from 15 votes

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 Read the rest…

Posted by Dion Almaer at 5:41 am

3.7 rating from 12 votes