JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block1"></div>
<div id="block2"></div>
<div class="block3" id="observableBlock"></div>
<div id="block4"></div>

CSS

#block1 {
  width: 100%;
  height: 500px;
  background-color: red;
  transition: background-color 2s;
}

#block2 {
  width: 100%;
  height: 500px;
  background-color: green;
}

.block3 {
  width: 100%;
  height: 500px;
  background-color: blue;
  transition: background-color 1s;
}

#block4 {
  width: 100%;
  height: 500px;
  background-color: grey;
}

.cyan-class {
  background-color: cyan;
}

JavaScript

console.clear()
const fn = ()=>{
	const el = document.getElementById('observableBlock')
	el.classList.toggle('cyan-class')
  console.log('Callback is Done...', el)
}
const callback = ()=>setTimeout(fn,1000)

const options = {
    threshold: 0.25,
}

const observer = new IntersectionObserver(callback, options);
const target = document.getElementById('observableBlock');
observer.observe(target);