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?
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>