Javascript: Animate Div when it is in viewport

Question

In the pictures you see 4 circles below the header,

I can not figure out how to make them animate as shown when they are in the viewport

Answer 1

You can use Intersection_Observer_API to check for when the element is in viewport and apply the animations.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

function handleIntersectionEntry(entry) {
if (entry.length > 0) {
  const item = entry[0];
  const ratio = Math.floor(item.intersectionRatio);
  if (ratio > 0) {
    // ITEM IN VIEWPORT
  } else if (ratio < 1) {
   // ITEM OUT OF VIEWPORT
  }
}


  const config = {
    root: null,
    threshold: [1.0],
    rootMargin: "0px"
  };

  this.Observer = new IntersectionObserver(
    handleIntersectionEntry,
    config
  );

  this.Observer.observe('YOUR DOM ELEMENT TO MONITOR');

Polyfill for all browswer support: https://github.com/w3c/IntersectionObserver/tree/master/polyfill