const images = document.querySelectorAll('#anim');
let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
observer = new IntersectionObserver((entries)=>{
console.log(entries);
entries.forEach(entry =>{
if(entry.intersectionRatio > 0){
var animname = entry.target.dataset.animname;
console.log(animname);
var animprop = animname + ' 1s';
entry.target.style.animation = animprop;
}else{
entry.target.style.animation = 'none';
}
})
},options);
images.forEach(image => {
observer.observe(image);
})
as soon as i added "options" after the callback it no longer repeated the animation of the elements. It does however log that the elements are no longer intersecting.