Animating shadows and corner radii about material-motion-js HOT 4 CLOSED

I believe that this is resolved by latest spec.

from material-motion-js.

This issue is a reminder to find the best platform-specific sorcery for performantly animating properties that cause repaints. It may be orthogonal to the spec, but I don't think it's resolved by it.

from material-motion-js.

Idea using :after and hardware accelerated properties:

.element {
  /* ... */
}
.element:after {
  box-shadow: 0 0 10px #000;
  transform: scale(0);
  transform-origin: center center;
  transition: 1s ease all;
}
.element:hover:after {
  transform: scale(1);
}

Problem: If we wan't to transition box-shadow from 0 0 0 to 5px 5px 10px, how do we determine what transform values to use?

from material-motion-js.

I made a pen last week to experiment with this idea: https://codepen.io/appsforartists/pen/gGpaQR

I didn't noticed enough of a perf impact on repainting shadows+corners to care (even on phone hardware). Keeping this idea in the back of my head if it becomes relevant, but for now, 🚪.

from material-motion-js.