-1

This issue is only on Chromium browsers. Whenever I use a style with transform: scale() in an Angular or a css keyframes animation and I do not have the Chrome flag "Experimental Web Platform features" enabled I get this error:

"The animation trigger "rotateText" has failed to build due to the following errors:

  • The provided animation property "scale" is not a supported CSS property for animations."

I know that there is a way to enable this on a site so that users do not need the flag on their machine, and I think it has something to do with Chrome origin trials. Any help would be appreciated!

Edit #1

Here is the relevant code:

Angular TypeScript animation

trigger('rotateText', [
  state('hover', style({
    transform: `translateY(-{{tYB}}%) scale({{scaleB}})`,
    opacity: 1,
    ['box-shadow']: '0px 10px 15px rgba(0,0,0,0.1)',
    filter: 'blur(0px)',
    ['z-index']: '{{zB}}'
  }), {params: {tYB: 0, scaleB: 1, fB: 0, zB: 8}}) ])

CSS

@keyframes throb {
  100% {
      scale: 1.1;
  }
}

Here is the flag:

enter image description here

Edit #2

After doing more research I have realized there are two separate problems.

Edit #3

I have solved the first problem by doing: ['-webkit-transform']: 'translateY(-{{tYB}}%) scale({{scaleB}})'

Matthew Jackson
  • 69
  • 6

1 Answers1

0

How are you using scale()? Please post relevant code. Some have reported that scale might need 2 params.

transform: scale(2, 0.5);

Your syntax is a bit off. The animation params go into template for input binding {params: {tYB: 0, scaleB: 1, fB: 0, zB: 8} which will be read by trigger rotateText and applied to the antimation. See this for correct synatx: stackoverflow.com/a/47125545/15439733

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • I have edited the question, I do not think it has anything to do with the parameters. I have inspected a site that does a similar animation and their scale works just fine even when I don't have the flag enabled – Matthew Jackson May 16 '22 at 13:50
  • Your syntax is a bit off. The animation params go into template for input binding `{params: {tYB: 0, scaleB: 1, fB: 0, zB: 8}` which will be read by trigger `rotateText` and applied to the antimation. See this for correct synatx: https://stackoverflow.com/a/47125545/15439733 – Joosep Parts May 17 '22 at 05:33
  • I am not sure what you see wrong with the syntax. I have not had problems passing in parameters to this state. I have bound these parameters through an element using the rotateText animation trigger in an html file. – Matthew Jackson May 17 '22 at 16:14