I have multiple headlines in a page that I want to animate to be shown word by word.
How can I achieve individual headline animation when they appear in the viewport? Right now all of them are animated on page load.
I have tried to change threshold from 0.1 to 0.8 but no difference.
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;
}
}<h1>
<span>Title</span>
<span>Goes</span>
<span>Here</span>
</h1>
<h1>
<span>2nd</span>
<span>Title</span>
<span>Here</span>
</h1>
<h1>
<span>3rd</span>
<span>Title</span>
<span>Here</span>
</h1>
New contributor
Dascaliu Vlad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1