Infinite Horizontal Logo Scroll

I’m currently trying to figure out how to do an infinite horizontal logo scroll similar to near the bottom on this website: https://www.speedgeek.com/

The site I’m currently working on is www.getawalkthrough.com/home-copy (This is my test playground)

I’ve learned most of what I need to from this thread: Making a bunch of images scroll across the screen on an infinite loop

The scroll works but after the logos have scrolled by, the logos don’t refresh and start again. What is wrong with my code?

Here is the code I’m using:

<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 = parseInt(elem.css('margin-left'),10)-1;
    var mright = parseInt(elem.css('margin-right'),10);
    elem.css('margin-left', mleft + 'px');
    if(Math.abs(mleft) > elem.width() + mright) elem.appendTo(scroller);
  }, speed);
});
</script>

Here is how my blocks are nested:
20

And here are the formatting for both divs:


Speedgeek is not infinite scrolling. You notice it just fades out (stops), resets, and restart the scrolling.

Issue with your site is that you are further wrapping your icon logos in another div inside companies-section. Then, you also do not have enough logos in your div. You need more logos so that it takes up 200% of the displayed width.

Hi @samliew I appreciate the help.

I took your advice and I’m still getting 2 errors here:

  1. Logos are starting to stack
  2. It’s not an infinite scroll - it ends and doesn’t refresh

Again here is the link I’m testing at: www.getawalkthrough.com/home-copy

Here is what it looks like:

And here is my new div structure:

And the layout settings:

Find

elem.appendTo(scroller);

Change to

elem.css('margin-left', '0').appendTo(scroller);

Code with changes:

<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')) - 1;
    var mright = Number(elem.css('margin-right'));
    elem.css('margin-left', mleft + 'px');
    if(Math.abs(mleft) > elem.width() + mright) elem.css('margin-left', '0').appendTo(scroller);
  }, speed);
});
</script>

@samliew I appreciate the help here again :slight_smile:

I think I’m Almost there. The issue I’m having now is that the scroller does a really wonky restart and looks like it’s glitching.

Here is where you can see it in action:
http://getawalkthrough.webflow.io/

What’s going on here?