Shopify - add scroll animation to all sections

section-scroll-animation.js

 let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.animate([
          {
             transform: 'translateY(30px)',
             opacity: 0,
             filter: 'blur(10px)'
             },
          { transform: 'translateY(0px)',
            opacity: 1,
            filter: 'blur(0px)'
          }
        ], {
          duration: 1000,
          iterations: 1,
          easing: 'ease-in-out',
          direction: 'normal'
        });
      }
    });
  });

  document.querySelectorAll('.shopify-section').forEach((section) => {
      observer.observe(section);
  });