angular: False positive warnings about not animatable properties

Which @angular/* package(s) are the source of the bug?


Is this a regression?



There was already a fix for this warnings on #46666 but it didn’t fix all the false positives.

For example with this code I get warnings.

export const collapse: AnimationTriggerMetadata = trigger('collapseAnimation', [
  state('expanded', style({ height: '*', visibility: 'visible' })),
  state('hidden', style({ height: 0, overflow: 'hidden', borderTopWidth: '0', visibility: 'hidden' })),
  transition('expanded => hidden', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  transition('hidden => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
<div class="collapse-content"
     [@collapseAnimation]="active ? 'expanded' : 'hidden'">
  <div class="collapse-content-box">

For me to remove the overflow hidden, I would have to set the style manually with the same delay as the animation.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Warning: The animation trigger "collapseAnimation" is attempting to animate the following not animatable properties: overflow
(to check the list of all animatable properties visit

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.4
Node: 16.15.1
Package Manager: npm 8.13.2
OS: win32 x64

Angular: 14.0.4
... cdk, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
@angular-devkit/architect       0.1400.4
@angular-devkit/build-angular   14.0.4
@angular-devkit/core            14.0.4
@angular-devkit/schematics      14.0.4
@angular/animations             14.0.6
@schematics/angular             14.0.4
ng-packagr                      14.0.3
rxjs                            7.5.5
typescript                      4.7.4

Anything else?

No response

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 1
  • Comments: 21 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Hey! Why is this not merged for an entire year? We face the same problem, and this warning appearing on every animation run is really annoying. Adding overflow as an animation step is a pretty common scenario, yet there is no way to say the framework that you are not really expecting it to “animate” this property, you just set it’s value.

Would love to see @dario-piotrowicz 's PR merged. Facing this issue with ‘display’.

Looking good, thanks 😃 I believe it still takes some efforts to solve the primary case we mentioned earlier (as to have some special way to define non-animatable styles within transition scope) but currently it completely satisfies the needs.

The web animations “standards” are clearly “in motion” so to speak. I wonder who maintains the list of “not animatable” properties for this warning? All your references in, @dario-piotrowicz, seem to contradict your statements now.

Would love to see @dario-piotrowicz 's PR merged. Facing this issue with ‘display’.

Same here. Let’s get it merged! 😄

@dario-piotrowicz LGTM! As for the other case @strigefleur mentioned, I will create another issue so we can discuss it there.

@dionatan-g, @strigefleur If you want please have a look at the PR, especially the unit tests to see how I implemented the disabling and if that looks good for your use cases 🙂

But tldr:

  • you can set disableAnimatableDevWarnings when setting up the BrowserAnimationsModule to completely disable the warning (if it really bothers you all the time)
  • or, you can set allowedProps in the specific transition call to fix a one-off issue (if you want the check/warning but it is bothering you in a specific situation)

Please let me know what you think 🙂

@dionatan-g I’ve acutally got a flag to disable the warning working on a local branch (basically there you can put the flag in the BrowserAnimationsModule to disable the warnings globally), I wanted to open a PR but haven’t found the time (I still need to add unit tests for it), at the latest I’ll open the PR this weekend 🙂 (I’ll ping you so you can have a look and see if that would help your case 🙂)

Regarding the styles I have some ideas/thoughts but I need to play with it to be sure…anyways yeah if you want create a new issue so we can keep things separate 🙂👍

@dario-piotrowicz the point is taken; but could you please share the right way to deal with such a non-animatable properties that have to be set in the end of transition?

whatever the rest of style props are the opposite animation states should respectively set overflow: hidden and overflow: visible - how’d you implement it within animation cycle itself having no warning?