I’m working on a project where I’d like to be able to determine exactly what style properties an animation is currently applying to an element, and ideally only those changes imparted by the animation (though if there are multiple animations currently acting on an element it’s fine and maybe even preferred if the result is a list / object of all style properties actively imparted by any animations on the element). I’ve seen some quality examples using getComputedStyle() and I think that’s fairly close to what I want but ideally I’d like an object or css string that only contains the style properties that are being applied by the animation (so no baseline style params that come from a css file or applied by other means).
Given the example below, I’d want to be able to know exactly how the scale and rotate properties are set no matter where I paused the animation without having to sort through inherent properties like padding or the blue color imparted by the other button.
I’ve looked through the web animation API docs pretty extensively and I haven’t found anything to directly address my needs. A reasonable naive approach is to look at the first or last (depending on animation direction) keyFrameEffect object in the animation and inspect the property value pairs for relevant properties but with how many ways animations can be paused or end at in between / unexpected spots in the animation cycle this doesn’t seem like a thorough solution. For example, this would not work if the animation is paused or even in a finish state if a value such as iterationStart is set since it now offsets the finish state away from the final keyframe.
Perhaps there’s a way to take the animation object and apply its exact current state to an otherwise blank object via commitStyles() or something so the resulting styles object on the blank element is contains only properties applied by the animation? I worry about custom elements / properties but maybe I’m overthinking it.
No matter what it’s critical I don’t directly change the element being animated or any of its properties so I’d need to be careful and make sure the commitStyles only affected the blank object. Possibly by changing the target of the keyframes then setting it back when finished?
Thanks in advance for any suggestions!
Example:
const newspaper = document.querySelector(".newspaper");
const colorChange = document.querySelector(".color-change");
const pauseButton = document.querySelector(".pause");
const finish = document.querySelector(".finish");
// I want a way to directly get the current value of these properties
// without being mixed in with other non animation related css properties
const newspaperSpinning = [
{ transform: "rotate(0) scale(1)" },
{ transform: "rotate(360deg) scale(0.7)" },
];
const newspaperTiming = {
duration: 2000,
iterations: 999,
fill: 'forwards',
iterationStart: 0.3
};
const newspaperKeyFrames = new KeyframeEffect(
newspaper, // element to animate
newspaperSpinning,
newspaperTiming, // keyframe options
);
const animation = new Animation(
newspaperKeyFrames,
document.timeline,
);
newspaper.addEventListener("click", () => {
animation.play()
});
colorChange.addEventListener("click", () => {
newspaper.style.color = 'blue';
});
pauseButton.addEventListener("click", () => {
animation.pause();
});
finish.addEventListener("click", () => {
animation.finish();
});html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
button {
cursor: pointer;
}
.newspaper {
padding: 0.5rem;
text-transform: uppercase;
text-align: center;
background-color: white;
cursor: pointer;
}<div class="newspaper">click to start spinning newspaper animation</div>
<button class="color-change">click to change the color</button>
<button class="pause">click to pause the animation</button>
<button class="finish">click to finish the animation</button>