Временная шкала анимации не работает или начинается с использованием Animejs v4.2.2 ⇐ Javascript

[Anonymous]

Недавно я столкнулся с проблемой в Animejs, когда пытался создать анимацию, состоящую всего из трех движущихся точек с изменением непрозрачности. Я безуспешно пробовал следующее:
javascript:

Код: Выделить всё

import { animate, stagger, splitText, utils, onScroll, createTimeline } from "animejs";
window.addEventListener("DOMContentLoaded", () => {
const { chars: threedots } = splitText(".threedots", {
chars: true,
words: false
});

const tl = createTimeline({
loop: true,
autoplay: true,
easing: "easeInOutSine",
});

tl.add({
targets: threedots,
translateY: [0, -6, 0],
opacity: [
{ value: 0, duration: 0 },
{ value: 1, duration: 300 },
{ value: 0, duration: 300 },
],
duration: 900,
delay: stagger(300),
});

tl.play();
});

html:

Код: Выделить всё

...

На моей веб-странице другие анимации работают нормально, поэтому это не проблема, связанная с анимеjs, и у меня также нет ошибок в консоли.
Когда я загружаю веб-страницу, диапазоны успешно вводятся на веб-страницу, но анимации нет...
Я попробовал поместить все в window.addEventListener("DOMContentLoaded", () => {}, чтобы дождаться успешной загрузки DOM, и я попытался запустить анимацию вручную с помощью tl.play(), но все равно ничего.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ejs-v4-2-2