▼
Streaming live at 10am (PST)

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:

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>