Анимация заголовка отложена до появления в окне просмотра. ⇐ CSS

[Anonymous]

У меня есть несколько заголовков на странице, которые я хочу анимировать, чтобы они отображались слово за словом.
Как добиться индивидуальной анимации заголовков, когда они появляются в области просмотра? Сейчас все они анимируются при загрузке страницы.
Я пытался изменить пороговое значение с 0,1 на 0,8, но безрезультатно.

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

window.onload = function() {
const observerOptions = {
root: null,
rootMargin: "0px",
threshold: 0.1
}

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.querySelectorAll('span').forEach((span, index) => {
span.style.setProperty('--word-index', index);
span.classList.add('reveal');
});
observer.unobserve(entry.target);
}
});
}, observerOptions);

document.querySelectorAll('.heading-reveal').forEach(target => {
observer.observe(target);
});
};

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

.heading-reveal {
display: flex;
flex-wrap: wrap;
}

.heading-reveal span {
opacity: 0;
animation: revealWord 0.5s forwards;
animation-delay: calc(var(--word-index) * 0.25s);
}

@keyframes revealWord {
to {
opacity: 1;
}
}

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

Title
Goes
Here



2nd
Title
Here



3rd
Title
Here

Подробнее здесь: https://stackoverflow.com/questions/785 ... n-viewport