Animation in AngularJS (opens in new tab)

With ng-animate, angular completes the circle of defining HTML DOM behavior in a pure declarative way. I can't wait for this to go to the stable branch.

I haven't seen slid.es before. This is awesome.

Saying "Animation in jQuery relies on CPU and Memory" is silly if you use translateZ(0) to create a composited layer which uses a tremendous amount more memory.

WebKit at least will create a composited layer for the duration of a transition/animation all by itself -- if you do choose to use translateZ(0) everywhere, understand that it consumes texture memory the whole time the element is in the DOM (and not display:none) and maybe has a backing store in heap as well. So if you want your page to not crash Mobile Safari on older Apple devices then use it judiciously.

I'm excited there's going to be an ngAnimate for animations in AngularJS, but I feel compelled to comment mostly to say that this presentation is awesomely done. Good job.

The anti-IE in this presentation is strong. Or rather, the anti pre-IE9. I have multiple clients that simply NEED me to support IE and be reasonably close in interaction to their modern browser counterparts. Banks are one of them. CSS3 animation with fallback is the key.

Ok, I am lost, but all I see is the definition of .fade CSS class using the transition/transform properties - not sure what this has to do with angularjs.

IE10 is over 10% market share. It's great that Microsoft is pushing the auto-update. If you don't care about the straglers, you'll be able to do some really cool stuff across all browsers and leave the legacy behind.

I'm not familiar with Angular.js. But I am very familiar with CSS3, jQuery and the Greensock animation platform. Greensock (TweenMax) is without a doubt the best animation platform I've ever used. CSS3 animation gives you nowhere near the amount of fine grain control over animations that greensock provides. CSS3 is great for simple stuff, but for complex reactive timelines it's basically impossible to work with. jQuery is OK for basic things that don't need the performance, but is clunky is feels restrictive.

http://www.greensock.com/transitions/

One thing that's still missing is editing CSS animations in angularJS. I'm finding that I have to make a lot of separate animations (hardcoded keyframes) and use those in code. No way to dynamically change the animation in the app.

Yup, CSS animations are easier to both write and use, and are super fast. Except on iOS6+ where a long-standing bug has made them nearly unusably slow.

PSA: Hit the 'eye' icon on the right, 'Run' on the top or CTRL/CMD-ENTER to toggle the preview pane in the demos.