JSFiddle - React, Tailwind, and code Playground

HTML

<div id="intersectionRoot">
    <div id="observedElement" draggable="true"></div>
</div>

CSS

#intersectionRoot {
    background-color: red;
    width: 100px;
    height: 100px;
    position: relative; /* added property */
}

#observedElement {
    position: absolute;
    background-color: green;
    width: 50px;
    height: 50px;
}

.shifted {
    transform: translate3d(110px, 0, 0)
}

JavaScript

let intersectionRoot = document.getElementById("intersectionRoot");
let observedElement = document.getElementById("observedElement");
let shifted = false; // Internal for the example

let interSectionObserver = new IntersectionObserver(
    (entries, observer) => {
        console.log(entries[0].isIntersecting)
    },
    { root: intersectionRoot }
);
interSectionObserver.observe(observedElement);

window.setInterval(
    () => {
        observedElement.classList.toggle("shifted")
    },
    1000
)