What is used for the animation of source fact stats?

[Andre601]

Recently did I add source fact statistic support for a separate repository host to my docs.

Tho, looking at it, the stats just "pop up" rather than having this small transition Material for MkDocs has usually for it...
What is used/required for this to work?

My current JS file for source facts gathering:

document$.subscribe(async () => {
    const url = 'https://codeberg-stats-proxy.vercel.app/repo'
    
    const [release, repo] = await Promise.all([
        fetch(`${url}/latest-release`).then(_ => _.json()),
        fetch(`${url}/stats`).then(_ => _.json()),
    ]);
    
    const list = document.querySelectorAll('ul[data-md-component="codeberg-stats"]');
    
    list.forEach((entry) => {
        entry.innerHTML = `<li class="md-source__fact md-source__fact--version">${release.name}</li>
            <li class="md-source__fact md-source__fact--stars">${repo.stars}</li>
            <li class="md-source__fact md-source__fact--forks">${repo.forks}</li>`
    })
})

My source.html override:

<a
  href="{{ config.repo_url}}"
  title="{{ lang.t('source') }}"
  class="md-source"
  target="_blank"
  rel="nofollow noreferral noopener"
>
  <div class="md-source__icon md-icon">
    {% set icon = config.theme.icon.repo or "fontawesome/brands/git-alt" %}
    {% include ".icons/" ~ icon ~ ".svg" %}
  </div>
  <div class="md-source__repository">
    {{ config.repo_name }}
    <ul class="md-source__facts" data-md-component="codeberg-stats">
    </ul>
  </div>
</a>