Angular 14 The animation trigger "rootItem" has built with the following warnings: - The following provided properties are not animatable: overflow

user_6544100 0
Viewed 564

Updated to Angular 14 and this warning appeared. These properties are not used in my animations.

[Error in console][1]
The animation trigger "rootItem" has built with the following warnings:
 - The following provided properties are not animatable: overflow
   (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
The animation trigger "panelContent" has built with the following warnings:
 - The following provided properties are not animatable: overflow
The animation trigger "submenu" has built with the following warnings:
 - The following provided properties are not animatable: overflow

How fix this?

angular-animations angular animation css
1 Answers

Update: Solution for false-positive warnings coming possibly through PR 46666

These warnings were added on PR 45212 to aid with issue 27577.

They are dev-only warnings that were added to "provide a better experience for developers so that if they see that something is not being animated then they can easily identify what is going wrong".

If anywhere in the transition not animatable properties are set, a warning is gonna be issued, whether or not they are part of an animate() call. You said that you're getting warnings for properties not used in your animations, but remember that animate() calls that don't specify the properties to bet animated, only the timing (in other words, only provide the first argument), will animate the diff between the initial and the end states, and that might be where the non animatable properties are being noted by the compiler.

If you are certain those non animatable properties are not part of your code in any way and thus the warnings make non sense, maybe open an issue on https://github.com/angular/angular/issues and provide an implementation example?

That being said, the discussion on issues 46602 might end up causing Angular to provide a way for developers to disable warnings in-place on style() calls where they decide the warnings are not applicable, but we'll have to wait and see.

user_24667680
Related