[csswg-drafts] [web-animations] Expose initial options in `KeyframeEffect` object (#7861)

Joozty has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations] Expose initial options in `KeyframeEffect` object ==
Currently, there is no way to get [initial options](https://www.w3.org/TR/web-animations-1/#dictdef-keyframeeffectoptions) from the [`KeyframeEffect` object](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect) which makes it hard to serialize. 

My use case:
I work on a [session replay tool](https://www.g2.com/categories/session-replay#learn-more) which relies heavily on the browser's APIs. Session replay software records and visually play back a user’s session on its website to better understand the user’s experiences. Therefore I would like to serialize the `Keyframe` object and replay it in a different window exactly the way it was animated in the user window.

Simplified code:
```js
const animations = document.getAnimations()
const keyframeEffects = animations.map(animation => animation.effect)
// getElementId() is my custom function which assigns unique id to given element
const serializedKeyFrameEffects = JSON.stringify(keyframeEffect.map(keyframeEffect => 
     [getElementId(keyframeEffect.target), keyframeEffect.getKeyframes(), /* options are missing */]
))


// another window
// replay in a different window
// getElementById() is my custom function
const deserializedKeyFrameEffects = JSON.parse(serializedKeyFrameEffect)
deserializedKeyFrameEffects.forEach((keyFrameEffect => {
     const [targetId, keyFrames] = keyFrameEffect
     const target = getElementById(targetId)
     new Keyframe(target, keyFrames, /* options are missing */ )

    // or
    // target.animate(keyFrames, /* options are missing */)

}
```

Workaround:
 There is the possibility to monkey patch `KeyframeEffect` constructor object and store options in some map so I can access them once there are needed . The problem is that this monkey patch needs to be applied before the animation is created which is not always the case since my script is loaded asynchronously.

--------------
Another use case I can think of - I want to temporarily pause all infinite animations on page:

```js
const animations = document.getAnimations()

for (const animation of animations) {
  if (animation.effect.options.iterations === Infinite) {
      animation.pause()
  }
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7861 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 10 October 2022 11:43:36 UTC