An idea for how we can observe changes caused due to animations

[LeaVerou]

Currently, we list this as a limitation:

You cannot observe changes caused by CSS animations

However:

• There are animation events
• There is document.getAnimations()

How about this:

• We listen to animationstart
• When it fires, we use document.getAnimations() to get metadata about the animation
• If it contains any of our observed properties, we add a setInterval() that checks for changes until animationend or animationcancel fire for that animation.

For smooth results, we may need to reduce the throttle for these cases, so we may need a constant MIN_THROTTLE with the minimum throttle we need for style-observer to work properly in Safari < 18.2.

[DmitrySharabin]

I played with your idea: I wrote some code (it's a first iteration, so of course, it's way far from perfect), and the test results are quite optimistic 🥳

[DmitrySharabin]

Here is the code I was experimenting with: #90