Making a bunch of images scroll across the screen on an infinite loop

Design help General
6

companies-section

  • width: 200%;
  • height: 54px;
  • overflow: hidden;
  • Put it in another div or container

Paste this in Page Settings > Custom Code > Footer Code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  var speed = 20; // Lower value = faster, Higher value = slower, 1000 = 1 second
  var scroller = $('.companies-section');
  var ii = setInterval(function() {
    var elem = scroller.find('img').first();
    var mleft = Number(elem.css('margin-left').replace(/[^0-9-]/g,'')) - 1;
    var mright = Number(elem.css('margin-right').replace(/[^0-9-]/g,''));
    elem.css('margin-left', mleft + 'px');
    if(Math.abs(mleft) > elem.width() + mright) elem.css('margin-left', '0').appendTo(scroller);
  }, speed);
});
</script>

Publish site

5 Likes