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

Get Help and Help Others
1

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) {
        entry.target.classList.add('animate-fadeIn')
      } else {
        entry.target.classList.remove('animation-fadeIn')
      }
    })
  }

  const observer = new IntersectionObserver(callback)

  const targets = document.querySelectorAll('.js-show-on-scroll')
  targets.forEach(function (target) {
    target.classList.add('opacity-0')
    observer.observe(target)
  })
2

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