RRWEB JS animation issue

index.html

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
<script type="module">
  // @ts-ignore
  const events = [];

  const stopFn = rrweb.record({
    emit(event) {
      // save the event
      console.warn(event);
      events.push(event);
    },
    recordCanvas: true,
    recordCrossOriginIframes: true,
    inlineImages: true,
  });

  setTimeout(() => {
    // @ts-ignore
    stopFn();
    // @ts-ignore
    console.error(events);
    // @ts-ignore
    downloadJson(events);
  }, 5000);

  // @ts-ignore
  function downloadJson(myJson) {
    const sJson = JSON.stringify(myJson);
    const element = document.createElement('a');
    element.setAttribute(
      'href',
      'data:text/json;charset=UTF-8,' + encodeURIComponent(sJson)
    );
    element.setAttribute('download', 'rrweb.json');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click(); // simulate click
    document.body.removeChild(element);
  }

  // Create a class for the element
class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});

    // Create spans
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');

    const icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);

    const info = document.createElement('span');
    info.setAttribute('class', 'info');

    // Take attribute content and put it inside the info span
    const text = this.getAttribute('data-text');
    info.textContent = text;

    // Insert icon
    let imgUrl;
    if(this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'img/default.png';
    }

    const img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // Create some CSS to apply to the shadow dom
    const style = document.createElement('style');
    console.log(style.isConnected);

    style.textContent = `
      .wrapper {
        position: relative;
      }

      .info {
        font-size: 0.8rem;
        width: 200px;
        display: inline-block;
        border: 1px solid black;
        padding: 10px;
        background: white;
        border-radius: 10px;
        opacity: 1;
        z-index: 3;
        transform: translateX(30px);
      }
    `;

    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
  }
}

// Define the new element
customElements.define('popup-info', PopUpInfo);

const el = document.getElementsByTagName('popup-info')[0].shadowRoot.querySelectorAll('.info')[0];

const keyframes = new KeyframeEffect(
    el,
    [
      { transform: 'translateY(0)' }
    ],
    { duration: 300, fill: 'forwards', delay: 300 }
  );

const anim = new Animation(keyframes, document.timeline);

anim.play();
</script>

<popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info>