[web-animations] Expose initial options in KeyframeEffect object #7861
Description
Currently, there is no way to get initial options from the KeyframeEffect object which makes it hard to serialize.
My use case:
I work on a session replay tool 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:
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:
const animations = document.getAnimations()
for (const animation of animations) {
if (animation.effect.options.iterations === Infinite) {
animation.pause()
}
}