Open
Description
I'm trying to reset an animation by setting the currentTime to 0.
When the animation is in the finished state, currentTime doesn't update the animation.
Only when calling animation.pause() before setting animation.currentTime I can see it changes.
document.timeline.getAnimations() also ignores animations in the finished state.
It will be useful to be able to get all animations for the same use case above to reset all animations in a timeline/page.
Tested with web-animations-next from the 2.1.3 release.
Might be related to
web-animations/web-animations-next#369
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>web animations</title>
<script>
var animation;
var startAnimation = function() {
var el = document.querySelector('#elem');
var effect = new KeyframeEffect(el, [
{opacity: 0},
{opacity: 1.0}
], {
duration: 2000,
fill: 'forwards'
});
animation = new Animation(effect, document.timeline);
animation.play();
};
var resetAnimation = function() {
//animation.pause();
animation.currentTime = 0;
};
</script>
</head>
<body>
<div id="elem" style="width:150px; opacity: 0;">Element</div>
<button onClick="startAnimation()">Start Animation</button>
<button onClick="resetAnimation()">Reset Animation</button>
<script type="text/javascript" src="web-animations-next.min.js"></script>
</body>
</html>