48

I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions.

e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations?

I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations?

Han Che
  • 8,239
  • 19
  • 70
  • 116
  • 4
    Well, I don't know much about Angular, but I think they just leverage the CSS animations. [In fact their docs say](https://angular.io/docs/ts/latest/guide/animations.html): *"Angular's animation system lets you build animations that run **with the same kind of native performance** found in pure CSS animations."*. They also specify that they use [web animations](https://w3c.github.io/web-animations/) where [possible](http://caniuse.com/#feat=web-animation). It's the first hit when you google for "angular 2 animation" – GolezTrol Dec 03 '16 at 15:21
  • 1
    I believe that the angular2 animations just create css animation when they are compiled. Advantage is being able to add and control the animations on the component level easier. – Nicholas Tsaoucis Dec 03 '16 at 15:23
  • thanks for the quick response, so basically what I'm getting with angular 2 animations are methods (like animat() and style()) which make animations more controllable (?) – Han Che Dec 03 '16 at 15:25
  • Yes, that's mainly what it's about. By having a generic API like this, you can make some often-used animations more easily accessible, and possible provide a graceful fallback if a browser doesn't support a certain feature or implements it differently. But I think that's actually the goal of mostly any library and framework like Angular, jQuery and the many, many others. – GolezTrol Dec 03 '16 at 15:27

2 Answers2

35

The question is actually more javascript animation vs css animation (because angular2's animations are based on javascript-animation).

The answer is that when you can - use CSS animation.

Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations.

You can use the HTML5 Animation Speed Test to check the preformance of different frameworks (javscript-based) VS CSS animation in your browser.

In general:

Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you can may have to rely on JavaScript-based animations instead.

If you want to know specifically regarding the Angular2 animations - just inspect the element in your browser and check if the animation there is a CSS(transition/animationFrame based or javascript (you will be able to see values in the style attribute change during the animation).

Dekel
  • 60,707
  • 10
  • 101
  • 129
  • That's nice, but although Angular is JavaScript, I think it still uses CSS to animate. No expert here, but the links I mentioned in my earlier comment seem to be clear about this. – GolezTrol Dec 03 '16 at 15:31
  • @GolezTrol, check the update from 1 min ago to my answer :) it explains how to check if the animation by angular2 is css or js based. – Dekel Dec 03 '16 at 15:32
  • 22
    @Dekel, with all due respect, since this answer is the first one that shows up in google search and has a high vote number I feel compelled to reply. Angular uses [web animations api](https://github.com/angular/angular/blob/master/packages/animations/browser/src/render/web_animations/web_animations_player.ts#L77) to trigger its animations, so it's not changing style properties through javascript and thus is quite performant. – Alex Okrushko Mar 13 '18 at 01:10
32

The answer is actually in the docs:

https://angular.io/guide/animations

Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

It also abstracts away the need to keep track of lengths of animations in order to stagger and avoid overloading the browser, or in chaining animations.

Generally, if you have a simple little thing, CSS is probably easier. But if you are consistently doing animation in your app you get a lot of power with little down-side from Angular Animations.

jkyoutsey
  • 1,969
  • 2
  • 20
  • 31