Animation in AngularJS
gsklee.imSaying "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.
Thanks for pointing this out; is there some further information you could point me to? Much appreciated!
If you have access to apple developer videos from WWDC for the past few years (not sure about 2013) they've talked about the translateZ(0) trick in the webkit / safari / css videos. It has been awhile and I don't currently have access but the impression left with me was "you don't need to do this anymore".
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.
I agree. What a wonderful job with the presentation. Kudos.
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 think that the addition of support for keyframe-based animations in 1.1.5 is really the killer feature.
This will allow for drop-in animations (like animate.css, mentioned in the deck) in the same sort of way that bootstrap allowed for drop-in styles.
If you don't have a specific reason not to, I'd highly recommend using the unstable branch today. I've had no problems with it since I switched several months ago, and any breaking changes have been pretty well documented in the release notes.
Agreed.
I'm just wondering how long it will take to get people to convert to this way of thinking.
meh , ng-animate is ultra buggy.
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.
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.
Animations are not a core part of functionality.
If your users are using IE, surely they only expect it to 'work'.
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.
Also notice the opacity property that actually changes the opacity of the content.
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.
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.
If we all didn't care about stragglers, there wouldn't be stragglers.
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.
I haven't seen slid.es before. This is awesome.
It used to be called reveal.io, it's by Hakim El Hattab, the guy behind reveal.js http://lab.hakim.se/reveal-js/# and plenty other stuff http://hakim.se
Man, that 3D rotating link style is obnoxious.
I agree, I was hoping at the end of the presentation they were going to say they coded it in Angular with ngAnimate!
PSA: Hit the 'eye' icon on the right, 'Run' on the top or CTRL/CMD-ENTER to toggle the preview pane in the demos.