

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

======
randallu
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
Thanks for pointing this out; is there some further information you could
point me to? Much appreciated!

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

------
ok_craig
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
I agree. What a wonderful job with the presentation. Kudos.

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

~~~
gbadman
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.

------
mr_noah
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/](http://www.greensock.com/transitions/)

------
navs
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
Animations are not a core part of functionality.

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

------
lenkite
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
Also notice the opacity property that actually changes the opacity of the
content.

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

------
melling
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
If we all didn't care about stragglers, there wouldn't be stragglers.

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

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

~~~
patrickaljord
It used to be called reveal.io, it's by Hakim El Hattab, the guy behind
reveal.js [http://lab.hakim.se/reveal-js/#](http://lab.hakim.se/reveal-js/#)
and plenty other stuff [http://hakim.se](http://hakim.se)

~~~
tlrobinson
Man, that 3D rotating link style is obnoxious.

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

