Animation in AngularJS

http://gsklee.im/post/53849339655/stop-spoiling-the-laggards-stop-thinking-in

by gsklee • 13 years ago

110 24 13 years ago

ok_craig• 13 years ago

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.

raju• 13 years ago

I agree. What a wonderful job with the presentation. Kudos.

kailuowang• 13 years ago

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.

at-fates-hands• 13 years ago

Agreed.

I'm just wondering how long it will take to get people to convert to this way of thinking.

gbadman2• 13 years ago

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.

psgibbs• 13 years ago

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.

camus• 13 years ago

meh , ng-animate is ultra buggy.

randallu• 13 years ago

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.

gsklee• 13 years ago

Thanks for pointing this out; is there some further information you could point me to? Much appreciated!

hueyp• 13 years ago

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".

webo• 13 years ago

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

patrickaljord• 13 years ago

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

tlrobinson• 13 years ago

Man, that 3D rotating link style is obnoxious.

tyndierock• 13 years ago

I agree, I was hoping at the end of the presentation they were going to say they coded it in Angular with ngAnimate!

gbadman2• 13 years ago

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

lenkite• 13 years ago

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.

yefim• 13 years ago

Also notice the opacity property that actually changes the opacity of the content.

CountHackulus• 13 years ago

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.

melling• 13 years ago

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.

trafficlight• 13 years ago

If we all didn't care about stragglers, there wouldn't be stragglers.

akivabamberger• 13 years ago

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.

mr_noah• 13 years ago

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/

navs• 13 years ago

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.

sturmeh• 13 years ago

Animations are not a core part of functionality.

If your users are using IE, surely they only expect it to 'work'.

Animation in AngularJS

Related Stories