Automatically play scroll on snap

Design help Custom code
1

Hello everyone,

I’ve used some custom code to create a scroll and snap effect. Is there a way to set the trigger from scroll to just play automatically when in view? Ideally would want the animation to loop as well. Is this possible?

https://preview.webflow.com/preview/snap-on-scroll?utm_medium=preview_link&utm_source=designer&utm_content=snap-on-scroll&preview=29a5902e273fdf4d840250cab100a70d&workflow=preview

2

HI Sheila,

The custom code you added already has the basis for automatically scrolling through sections, but we can try to refine it to ensure it loops and plays automatically when in view. Try using this code instead. I can’t test it on read-only but I hope it will work.

<script>
document.addEventListener('DOMContentLoaded', function() {
  const sections = document.querySelectorAll('.section');
  let currentIndex = 0;
 
  function scrollToNextSection() {
    if (currentIndex >= sections.length) {
      currentIndex = 0; // Reset to first section
    }
    sections[currentIndex].scrollIntoView({ behavior: 'smooth' });
    currentIndex++;
  }
 
  // Function to start the loop when the section is in view
  function startScrollLoop() {
    scrollToNextSection(); // Start immediately
    setInterval(scrollToNextSection, 3000); // Change the interval as needed
  }
 
  // Observe when the scroll snap wrapper comes into view
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      startScrollLoop();
    }
  }, { threshold: 0.5 }); // Trigger when 50% of the element is visible
 
  // Observe the scroll snap wrapper
  const scrollSnapWrapper = document.querySelector('.scroll-snap-wrapper');
  observer.observe(scrollSnapWrapper);
});
</script>