web-animations / web-animations-js

JavaScript implementation of the Web Animations API
http://web-animations.github.io
Apache License 2.0
3.77k stars 408 forks source link

Loading library twice leads to Error #233

Open LasyIsLazy opened 2 years ago

LasyIsLazy commented 2 years ago

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>
EkremSolmaz commented 1 year ago

I've upgraded angular version of my project from 9 -> 14 and now I'm getting the same error.