JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
    <div id="known" class="box">Known</div>
    <div id="actual" class="box">Actual</div>
  </div>

CSS

#root {
  position: relative;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #000;
  width: 320px;
  height: 320px;
  box-shadow: 0 0 30px #0002;
  box-sizing: border-box;
  font: 14px sans-serif;
}

.box {
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  line-height: 80px;
  white-space: nowrap;
  box-sizing: border-box;
}

#known {
  background: #8881;
  border: 1px dashed #999;
}

#actual {
  background: #0068;
  color: #fff;
  transition: all 0.3s;
}

JavaScript

const known = document.querySelector('#known');
const actual = document.querySelector('#actual');

// -- Intersection Observer --------

const ioOptions = {
  treshold: 0,
  root: known
};
const ioObserver = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
    if(entry.isIntersecting){
     ioChange(entry);
    }
  });
});

function ioChange(entry) {
  console.log('Intersection changed:', entry.intersectionRect);
}

ioObserver.observe(actual);

// -- Sample animation logic -----

// I expect that this animation constantly triggers the 
// ioChange callback above.

// -- Sample animation logic -----

function setKnown() {
  known.style.left = actual.style.left;
  known.style.top = actual.style.top;
}

function moveBox() {  
  actual.style.left = (Math.random() * 240) + 'px';
  actual.style.top = (Math.random() * 240) + 'px';
}

actual.style.left = '120px';
actual.style.top = '120px';
setKnown();
setInterval(moveBox, 1000);