My current challenge involves animating elements with the intersection observer, but I am encountering strange behavior with elements that are already on the screen when the page loads.
These elements sometimes animate correctly and other times they do not, seemingly at random.
const faders = document.querySelectorAll('.fade-in');
const sliders = document.querySelectorAll('.slide-in');
const appearOptions = {
threshold: 0,
rootMargin: "0px 0px -200px"
};
const appearOnScroll = new IntersectionObserver((entries, appearOnScroll) => {
entries.forEach(entry =>{
if (!entry.isIntersecting){
return
}
else{
entry.target.classList.add("appear");
appearOnScroll.unobserve(entry.target);
}
})
}, appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
});
sliders.forEach(slider => {
appearOnScroll.observe(slider);
});