Loading library twice leads to Error #233
Description
For some reason, I have to load this library many times.
When I call ele.animate(...args), the animation does not play but an Error thrown by browser.
VM1558 web-animations-next.min.js:15 Uncaught TypeError: Cannot read properties of null (reading 'cancel')
at new b.Animation (VM1558 web-animations-next.min.js:15:48940)
at b.AnimationTimeline._play (VM1558 web-animations-next.min.js:15:47984)
at HTMLImageElement.Element.animate (VM1558 web-animations-next.min.js:15:57766)
at Object.b.newUnderlyingAnimationForKeyframeEffect (VM1558 web-animations-next.min.js:15:58061)
at b.Animation._rebuildUnderlyingAnimation (VM1558 web-animations-next.min.js:15:49847)
at new b.Animation (VM1558 web-animations-next.min.js:15:48894)
at b.AnimationTimeline._play (VM1558 web-animations-next.min.js:15:47984)
at HTMLImageElement.Element.animate (VM1558 web-animations-next.min.js:15:57766)
at ani (test.html:20:31)
at test.html:38:9
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img
src="https://avatars.githubusercontent.com/u/2975912?s=200&v=4"
alt=""
srcset=""
/>
<script src="./web-animations-next.min.js"></script>
<script src="./web-animations-next.min.js"></script>
<script>
const img = document.querySelector('img');
function ani() {
const animation = img.animate(
[
{
transform: 'scale(1)',
},
{
transform: 'scale(2)',
},
],
2000
);
console.log(animation);
window.animation = animation;
animation.onfinish = (...args) => {
console.log('onfinish', ...args);
};
}
setTimeout(() => {
ani();
}, 1000);
</script>
</body>
</html>