Transform is not updated on scroll

[kizu]

Enabling scrolling on the example for the https://kizu.dev/position-driven-styles/#distributing-anything-property, then selecting an item and scrolling the container results in the element's transform change not being reflected on the minimap.

ezgif.com-resize.4.mov

[bramus]

While transforms do typically get updated – e.g. inspect body > header > img on https://scroll-driven-animations.style/ – the problem here is that the scroll-driven animation updates custom props which are used in a regular transform that is applied to the element.

The way the extension currently works it to copy over only the animation onto the animated element in the minimap.

What could work here is to try and figure out which declarations on the animated element are using those custom properties and copy them over. However, that is not possible right now because w3c/csswg-drafts#10002 does not exist yet.

Another way around this is to constantly do a new getComputedStyle() when the scroll position changes, but that would be expensive to do.

Open to further ideas/suggestions.