animation classes appyling on Scroll when each section fully shown on the screen

I am facing problem since monday. And I used ChatGPT alot. But did'nt get the solution.

I have few section in my template.

section1 section2 section3 section4 section5.

I want that each section visible 90% once on scroll. (should be response two). I want to apply a specific animation classes.

I did't alot from my side. But I did'nt.

Here is my current code. on scroll (please have a look).

window.addEventListener('scroll', () => {
// I am checking that i am at the top of the div-3 or not ?
const _section: any = document.getElementById('div-3');
const _sectionTop: any = _section.offsetTop;
const _sectionBottom: any = _sectionTop + _section.offsetHeight;
const _scrollPosition = window.scrollY + window.innerHeight;

// Check if the top of the section is in view
if (_scrollPosition >= _sectionTop && window.scrollY < _sectionBottom) {
console.log('I am at the top of the div-3 section!');
div6.style.display = 'block';
div7.style.display = 'none';
} else {
console.log('Not I am not at the top of the div-3 section.');
}

// --------- DIV 4 ---------
// ------ Statistics -------
// -------------------------
const scrollPosition = window.scrollY + window.innerHeight;
const div4Start = div3.offsetTop;
let expandThreshold = div4Start - (window.innerHeight * 0.1);

if (scrollPosition >= expandThreshold) {
div4.querySelectorAll('.card').forEach((card: any) => {
// Add animation classes again
card.classList.add('animate__animated', 'animate__zoomIn');
// Remove animation classes after animation ends
card.addEventListener('animationend', () => {
card.classList.remove('animate__animated', 'animate__zoomIn');
}, { once: true });
});
} else {
div4.querySelectorAll('.card').forEach((card: any) => {
// Add animation classes again
card.classList.remove('animate__animated', 'animate__zoomIn');
});
}

// -------- DIV 6 --------
// A Legacy of Exploration
// -----------------------
const div6Headings: any = document.getElementById('div-6-headings');
const div6Start = div6.offsetTop;
expandThreshold = div6Start - window.innerHeight * 0.1;
if (scrollPosition >= expandThreshold) {
// Trigger the class removal and margin change after a delay or an event
setTimeout(() => {
globe.classList.add('globe-animate');
setTimeout(() => {
map.style.display = 'block';
div6Headings.style.display = 'block';
map.classList.add('animate__zoomIn');
div6Headings.classList.add('animate__fadeIn');
}, 800);
}, 800); // Start after 1 second (adjust timing as needed)

} else {
map.style.display = 'none';
div6Headings.style.display = 'none';

map.classList.remove('animate__zoomIn');
globe.classList.remove('globe-animate');
div6Headings.classList.remove('animate__fadeIn');
}

// -------- DIV 7 --------
// A Gateway to Growth
// -----------------------
const div7Headings: any = document.getElementById('div-7-headings');
const div7Start = div7.offsetTop;
expandThreshold = div7Start - window.innerHeight * 0.01;
if (scrollPosition >= expandThreshold) {
} else {
}

// --------- DIV 8 ---------
// Unlock Untapped Potential
// -------------------------
const div8: any = document.getElementById('div-8');
const div8Headings: any = document.getElementById('div-8-headings');
const div8Start = div8.offsetTop;
expandThreshold = div8Start - window.innerHeight * 0.1;
if (scrollPosition >= expandThreshold) {
div6.style.display = 'none';

div7.classList.add('animate__animated', 'animate__fadeIn');
div7.style.display = 'block';

map2.classList.add('animate__zoomIn');
div7Headings.classList.add('animate__slideInUp');
} else {
map2.classList.remove('animate__zoomIn');
div7Headings.classList.remove('animate__slideInUp');
// div8Headings.classList.remove('animate__slideInRight');
}

// -------- DIV 9 ---------
// Eligibility Requirements
// ------------------------
const div9: any = document.getElementById('div-9');
const div9Headings: any = document.getElementById('div-9-headings');
const div9Start = div9.offsetTop;
expandThreshold = div9Start - window.innerHeight * 0.1;
if (scrollPosition >= expandThreshold) {
// Trigger the class removal and margin change after a delay or an event
setTimeout(() => {
div8Headings.classList.add('animate__slideInRight');
div9Headings.classList.add('animate__slideInRight');
}, 250); // Start after 1 second (adjust timing as needed)
} else {
div8Headings.classList.remove('animate__slideInRight');
div9Headings.classList.remove('animate__slideInRight');
}
});

Continue reading...