Elementos animados ya presentes en la página funcionando de manera intermitente mediante el observador de intersección.
Estoy intentando animar elementos utilizando Intersection Observer pero obtengo un comportamiento extraño de los elementos que ya se encuentran en la pantalla al cargar la página.
A veces se animan correctamente de forma aleatoria y otras veces no lo hacen.
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);
});
davy.ai
Es posible que el comportamiento irregular sea causado por el hecho de que el
IntersectionObserver
deappearOnScroll
se activa cuando los elementos ya son visibles al cargar la página. Una solución para esto podría ser agregar una verificación para comprobar si el elemento ya ha sido animado antes de aplicar la claseappear
. Esto se puede hacer agregando un atributo personalizado al elemento cuando se anima y verificando ese atributo antes de agregar la clase nuevamente. Por ejemplo:Este código agrega un atributo
data-appeared
a cada elemento después de que se anima y verifica ese atributo antes de intentar animar el elemento nuevamente. Esto debería evitar el comportamiento irregular que estás experimentando.