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.