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

Design help General
1

Hey guys, WebFlow newb here… I was wondering if anyone had any tips on how to create the following effect:

At one section of a 1 page website, I want there to be a bunch of company logos (about 20) scrolling through the screen from left to right. The logos are all the same height (but different widths) and there are more that can fit the screen at one time. So it should be scrolling and as it’s scrolling it shows all the logos, just like it does here:

http://www.speedgeeknyc.com/ (scroll down to the COMPANIES section)

Any idea on the best way to replicate that in Webflow?

Here is my public share link: LINK
(how to access public share link)

2

You could use animations although you won’t be able to do this most likely if you have more content than what fits the page.

You could also do this with a slider. It might be a little difficult but I am sure if you get all the times just right it will do exactly what is on the sample site.

Hope this helps. Be sure to contact me if you need any further help or have questions. :wink:

3

It doesn’t… I wouldn’t even known where to begin after adding the slider. I was hoping someone has already done it and I can just borrow from them, or there was a tutorial available for particular action

4

Create the design first (drop images within a div), then post your public share link here.

1 Like
5

Thanks for the help! Is this what you mean by Public Share link?

https://preview.webflow.com/preview/speedgeek?preview=30706c77ee3a865328197a2f2bd4fff1

The images in question are located under the Companies DivBlock (under Companies Section)

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
7

Really appreciate it it Sam, however I’m still on the “Starter” account so I can’t use any custom code. Also I was hoping to learn how to actually create this myself. Is this not something that could be created in the webflow graphic UI ?

8

There are no Webflow components that have this sort of functionality. You cannot even use interactions for this. Custom code is the way to go.

9

I see… maybe i’ll just fine a different way to display the company names then.

10

Thanks for the help again

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.