Animate on scroll working on local host but not on the live site

I setup my portfolio site to have animation on scroll. When I test it in localhost it works, but when I push it to the live site via Netlify it does not work. I thought maybe it was a cache issue, but it does not work after flushing the cache/using a new browser… Any suggestions on what I might be missing?

Here is the full code and the snippet:

  const callback = function (entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {'animate-fadeIn')
      } else {'animation-fadeIn')

  const observer = new IntersectionObserver(callback)

  const targets = document.querySelectorAll('.js-show-on-scroll')
  targets.forEach(function (target) {

I think you might only want to associate that event handler when the react component is properly mounted; this tutorial might be helpful:

1 Like