6 ms·

Animation in AngularJS

110 points by gsklee 13y ago

ok_craig 13y 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 13y ago
  I agree. What a wonderful job with the presentation. Kudos.
kailuowang 13y 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 13y ago
  Agreed. I'm just wondering how long it will take to get people to convert to this way of thinking.
- gbadman 13y 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 13y 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 13y ago
  meh , ng-animate is ultra buggy.
randallu 13y 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 13y ago
  Thanks for pointing this out; is there some further information you could point me to? Much appreciated!
  - hueyp 13y 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 13y ago
I haven't seen slid.es before. This is awesome.
- patrickaljord 13y 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/# http://lab.hakim.se/reveal-js/# and plenty other stuff http://hakim.se http://hakim.se
  - tlrobinson 13y ago
    Man, that 3D rotating link style is obnoxious.
- tyndierock 13y ago
  I agree, I was hoping at the end of the presentation they were going to say they coded it in Angular with ngAnimate!
gbadman 13y 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 13y 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 13y ago
  Also notice the opacity property that actually changes the opacity of the content.
CountHackulus 13y 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 13y 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 13y ago
  If we all didn't care about stragglers, there wouldn't be stragglers.
akivabamberger 13y 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 13y 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/ http://www.greensock.com/transitions/
navs 13y 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 13y ago
  Animations are not a core part of functionality. If your users are using IE, surely they only expect it to 'work'.

110 points by gsklee 13y 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 13y ago
I agree. What a wonderful job with the presentation. Kudos.

kailuowang 13y 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 13y ago
Agreed. I'm just wondering how long it will take to get people to convert to this way of thinking.
gbadman 13y 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 13y 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 13y ago
meh , ng-animate is ultra buggy.

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

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

patrickaljord 13y 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/# http://lab.hakim.se/reveal-js/# and plenty other stuff http://hakim.se http://hakim.se
- tlrobinson 13y ago
  Man, that 3D rotating link style is obnoxious.
tyndierock 13y ago
I agree, I was hoping at the end of the presentation they were going to say they coded it in Angular with ngAnimate!

gbadman 13y 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 13y 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 13y ago
Also notice the opacity property that actually changes the opacity of the content.

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

akivabamberger 13y 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 13y 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/ http://www.greensock.com/transitions/

navs 13y 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 13y ago
Animations are not a core part of functionality. If your users are using IE, surely they only expect it to 'work'.