Open OnkarRuikar opened 1 month ago
I think you should use element.getAnimations()
:
const box = document.querySelector(".box");
function playAnimation({ effect, id }) {
if (id !== 'colorChange') return
const keyframes = effect.getKeyframes();
const options = {
duration: 2000,
iterations: 1,
};
effect = new KeyframeEffect(box, keyframes, options);
const animation = new Animation(effect);
animation.play();
}
box.getAnimations().forEach(playAnimation);
Not really possible, you won't get the animations from that element if they're not already applied, and the request here is for a way to apply an effect on an element that has no animations applied to it.
I don't think there's any way now to refer to a keyframes rule by it's name from Web Animations, and I think it would be nice to be able to do so. E.g. be able to play effects ad-hoc from a library that's already prerenderred to the document's style.
I can think of two APIs that could help here:
I think you should use
element.getAnimations()
:
The element.getAnimations()
method returns only the scheduled or running animations on the element. Even if you've applied an animation to an element in CSS using animation
property, once the animation completes you can't get reference of it using the getAnimations()
method.
My issue is that Web Animation APIs work with POJO inputs and current CSS API returns objects like CSSKeyframesRule. Objects returned by CSS APIs are not compatible with Web Animation APIs.
What I am asking is that
a. either the CSSKeyframesRule class to have a deserialize()
like method that will return Web Animation compatible plain objects
b. or the Web Animation API to accept CSS API returned objects.
This will save us from converting a lot of animations defined in CSS to JS. And it will keep the CSS stylesheet animations relevant in the long run.
- Referencing a keyframe object by name where a keyframe object param is accepted.
:+1: This would be the best thing as it would save us from retrieving and converting the keyframes.
- A way to get a map of enumerated keyframe objects by their name.
This is nice to have, but the returned objects need to be compatible with the Web Animations API.
This is nice to have, but the returned objects need to be compatible with the Web Animations API.
Well, naturally.
I think this method is a common pattern when working with an animation library and it would be nice for the platform to allow that pattern.
Related to spec https://drafts.csswg.org/web-animations-1/#dom-animatable-animate
I have key frames defined in already existing CSS:
I want to use the keyframes in JS to animate on a div: