Animation on Scroll - Intersection Observer Javascript not working in WordPress?

Question

I'm trying to get animate.css to fire up a CSS animation when the CSS selector comes into view when scrolling down a page.

The animations work fine at the top of the page - so that bit works okay. It's just pausing or stopping the animation until they come into view.

I've found several different solutions (none that have worked so far, unfortunately) most of which use an IntersectionObserver JavaScript. I'm using WordPress, so I don't know if this is causing an issue?

I was hopeful this code (below) would work - which I adapted from this site - https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/

// Create the observer like the examples above
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animateThis');
      return;
    }

    entry.target.classList.remove('animateThis');
  });
});

// Get multiple elements instead of a single one using "querySelectorAll"
const squares = document.querySelectorAll('.onScroll');

// Loop over the elements and add each one to the observer
squares.forEach((element) => observer.observe(element));

I've given an element I'd like to animate an '.onScroll' CSS selector. I was hoping the above JavaScript code would change this to '.animateThis' if it came into view, and the animation would run. But so far, nothing is happening.

I don't know if the JavaScript code is actually running, I've tried manually placing the code in the header, footer using and via the WPCode plugin?

Or if my adapted JavaScript code is incorrect? Apologies if these are silly questions

I thought it would be easy to simply get a JavaScript that worked nicely with animate.css (or any CSS animation) in WordPress to trigger when in view on scrolling.