Slider autoplay once scrolled into view

Design help Animations & Interactions
1

I am trying to figure out how to make a slider start auto-playing once it is scrolled into view. I’ve tried setting up a display: block interaction when the slider object is scrolled into view (both with new and legacy interactions), as suggested in this post, but it doesn’t seem to work. The slider always starts autoplaying with page load so by the time the user reaches it, they’re somewhere in the middle of the slideshow.

Any suggestions? Not posting the project link because I’m not supposed to share publicly and this should be the same for any webflow project trying to achieve this effect. Can create a dummy project if needed to demonstrate.

Thanks in advanced for any help!!

2 Likes
2

You will likely need to use custom code for this considering that there is no interaction that can target playing of an element. Sorry I don’t have better news.

1 Like
3

Looking for an alternative way to make the slider only start auto-playing when it is scrolled into view… this Wait for slider to come into view before autoplay method is no longer working…

However I was able to make a demo of a way to make it work:

Clonable:
https://webflow.com/website/start-slider-autoplay-when-scrolled-in

Demo:
https://start-slider-autoplay-when-scrolled-in.webflow.io/

It uses some custom code to watch on scroll for if the slider has been shown and then sets the data-attributes for the slider to autoscroll and then re-sets webflow.js to start the animations again.

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
    function restartWebflow() {
      window.Webflow && window.Webflow.destroy();
      window.Webflow && window.Webflow.ready();
      window.Webflow && window.Webflow.require('ix2').init();
      document.dispatchEvent(new Event('readystatechange'));
    };
    var scrollTimer;
    function scrollFunction() {
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(function() {
        var homeSlider = $('#AUTO-PLAY-SLIDER');
        if (homeSlider.attr('style') === "display: block;") {
        	homeSlider.attr('data-autoplay','1').attr('data-delay','1000');
          window.removeEventListener('scroll', scrollFunction);
          restartWebflow();
        }
      }, 200);
    }
    window.addEventListener('scroll', scrollFunction);
  });
</script>
4

Thanks for the contribution!

Almost solved my need, except the restart retriggered my page load animations.

Hoping to keep this thread alive. Would love to see an alternative solution.

1 Like
5

Here is an alternative solution:

It will start auto-playing the slide when enter 100px in viewport from top…
Also do not make slider Auto-Play in Webflow.
Here is the code:

function play_slide(){
      	var tabTimeout;
      	clearTimeout(tabTimeout);
      	tabLoop();

    		// define loop - cycle through all tabs
   			function tabLoop() {
        		tabTimeout = setTimeout(function() {
               	$('.w-slider-arrow-right').click()  // click resets timeout, so no need for interval
         		}, 3000);  // 5 second tab loop
   			 }

    			// reset timeout if a tab is clicked
    			$('.w-slider-arrow-right').click(function() {
        			clearTimeout(tabTimeout);
        			tabLoop();
        	});
    	}
    
    
    	let observer = new IntersectionObserver((entries, observer) => { 
    			entries.forEach(entry => {
    						if(entry.isIntersecting){
    										play_slide()
            						observer.unobserve(entry.target);
    						}
    			});
  		}, {rootMargin: "0px 0px -100px 0px"}); 

  		let target = $('.w-slider')[0]
  		observer.observe(target)
2 Likes
6

Thanks! This help me when I have multiple sliders in one page. :raised_hands:

7

@Muhammad_Dilshad Very nice! Thanks.
Only issue I have is that the slider no longer behaves in the usual way post user interation - it will continue sliding rather than reverting to human control only.
It’s been a long day but I might have a crack at this tomorrow - any pointers? - would be appreciated!
Cheers, Dave