Как заставить IntersectionObserver работать с анимациями преобразования и перевода?

Question

Я хочу создать анимацию для элемента со следующими свойствами:

• он анимирует элемент, когда он входит в область просмотра
• если элемент ушел окно просмотра, а затем снова войдет в него, оно должно быть снова анимировано
• в зависимости от направления прокрутки / стороны пересечения (сверху или снизу) анимация должна быть другой

Для этой цели я использую IntersectionObserver, и я приблизился к желаемому результату.
Единственная проблема, с которой я столкнулся, - , когда я перевожу элемент в направлении прокрутки ( что в данном случае transform: translateY) во время анимации . Это приведет к срабатыванию IntersectionObserver несколько или даже бесконечного числа раз.

function isIntersectingFromTop(entry){
  return entry.boundingClientRect.bottom != entry.intersectionRect.bottom;
} 

function isIntersectingFromBottom(entry){
  return entry.boundingClientRect.top != entry.intersectionRect.top;
}

var count = 0;

function incrementCounter(entry){
  document.querySelector(".counter").textContent += "intersectionRation (" + count + "): " + entry.intersectionRatio + "\n";
  count++;
}

let observer = new IntersectionObserver(
function (entries, observer) { 
  entries.forEach(function(entry){
    incrementCounter(entry)
    if (entry.isIntersecting) {
       if(isIntersectingFromTop(entry)){
         entry.target.classList.add("animated--up-in");
       } else if(isIntersectingFromBottom(entry)) {
         entry.target.classList.add("animated--down-in")
       }
    } else { 
      /** element is not in viewport anymore
        * this will be triggered right after the animation starts
        * since the translate is moving the elment out of the view
        * which is causing a new intersection (isIntersecting = false)
        */
      entry.target.classList.remove("animated--up-in");
      entry.target.classList.remove("animated--down-in");
    }
  });
});

observer.observe(document.querySelector(".to-animate"));

.container {
  height: 1000px;
  width: 100%;
}

.box{
  position: static;
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 10px;
}

.to-animate{
  background: blue;
  opacity: 0;
}

.animated--up-in {
  animation: animateUpIn 1.5s forwards ease;
}

.animated--down-in {
  animation: animateDownIn 1.5s forwards ease;
}

@keyframes animateUpIn {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes animateDownIn {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}



.counter {
  position: fixed;
  top: 10%;
  left: 30%;
  color: black;
  height: 80%;
  width: 50%;
  overflow-y: auto;
  padding: 10px;
}

Вопрос

Как я могу "сказать" IntersectionObserver игнорировать переведенный позиции и просто использовать начальную / исходную позицию для расчета пересечений (без дополнительных элементов)? Это вообще возможно?