Scroll Fade-In Sections for Squarespace

<script>
(function () {
  /* Respect reduced motion: leave everything visible */
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  if (!('IntersectionObserver' in window)) return;

  /* To skip the very first section on each page (the hero), use:
     var sections = document.querySelectorAll('.page-section:not(:first-child)'); */
  var sections = document.querySelectorAll('.page-section');

  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-in-view');
        observer.unobserve(entry.target); /* animate once, then leave it alone */
      }
    });
  }, { threshold: 0.12 });

  sections.forEach(function (section) {
    section.classList.add('fade-section');
    observer.observe(section);
  });
})();
</script>

/* Starting state, applied by the script so non-JS visitors
   never see hidden content */
.fade-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-section.is-in-view {
  opacity: 1;
  transform: none;
}