Infinite Logo Marquee Scroll Effect in Webflow | Tutorial

[@JuliaAngilova]

Thank you man! It was so easy with your tutorila!

[@odiboudoo]

God bless you! I've been looking for this, the over videos I've seen just rushed over the responsiveness...thanks man

[@dancastady8571]

I love you SO much for this. I was looking for this EXACT tutorial, my friend!

[@dereksiuau]

Glad I could help!

[@franciscolarios3487]

The main difference between this and other videos is that you explain the concepts as you explain the objective. It was really helpful! Suscribed.

[@dereksiuau]

Thanks for subscribing Francis!

[@kelseyhiggins5619]

This is the first animation I've done in webflow! I love it thank you so much!

[@dereksiuau]

Wow - that's impressive for your first animation. Well done, hopefully by understanding the premise of this tutorial you can use it to build other animations :)

[@salmonj77]

Was just looking for this the other day omg. Thank you for these tutorials, absolute legend

[@dereksiuau]

No problem 👍 glad it helped. Just remember this is just ONE way of doing this. But I hope you can wrap your head around the concept that is all that matters in the end.

[@henrysabin165]

You just saved my life Derek. God bless you.

[@dereksiuau]

Glad your life was saved haha!

[@edwincruz8365]

I've watched other videos and they weren't as thorough as this one. thank you!!

[@dereksiuau]

Glad it was helpful and thorough :)

[@arije9834]

Thank you for your response. Yes I know there are plugin. Elementor also have image carousel. But I mostly use the elementor HTML widget to create things myself . I was able to create html and css code that works perfectly as yours ALL THANKS TO THIS VIDEO . I used as my guide

[@dereksiuau]

Thats AWESOME to hear, at the end of the day Webflow really is just CSS / HTML / JS - so it was cool you translated this into Wordpress based on my tutorial lol.

[@darryltang3999]

Thank you so so much, other tutorial i found required custom code but yours is well explained, simple to understand and works really well!

[@dereksiuau]

You're welcome! - Glad you found it helpful and I hope you learnt the premise (reason why) rather than following a step by step tutorial.

[@nicoprince69]

Thanks man, legend 🙏

[@alexkelso1649]

mate, you are an absolute legend. Thank you very much!

[@dereksiuau]

You're welcome!

[@OpalBridgeInnovations]

Bro your a ledgend!!! Thank you for making this simple

[@dereksiuau]

No problem glad you found it simple bro 👍

[@chissupa1]

thanks, this works perfectly

[@dereksiuau]

Great to hear!

[@munkhbatmunkh6843]

Thank you it's really helped

[@dereksiuau]

Glad to hear that!

[@ValentinaVaccotti]

Great tutorial! How would you go about the carousel looping the other way around? To have the logos instead of going to the right going to the left. Thanks!

[@dereksiuau]

Great suggestion! - It would be the same premise. Instead of moving it -100vw or -100% just do the opposite: 100vw or 100%. Hope that makes sense!

[@FayeForteo]

thank you so much I was able to do it!

[@dereksiuau]

You're welcome! - Glad to hear you were able to do it :)

[@smbghn]

great video. extremely helpful.

[@dereksiuau]

Glad it was extrmeely helpful!

[@jfoldger1184]

Goated tutorial

[@dereksiuau]

Thankss haha

[@peterpaul6953]

Hey mate, fantastic slider. I tried to build it myself but I have a sroll bar at the bottom to scroll to the right side. Maybe I made a mistake somewhere? I use only logo grid instead of two because my grid is already longer than the page width. Therefore I thought no need to copy that. Maybe here is the mistake? A hint would be really appreciated because I did not find a solution so far.

[@dereksiuau]

Hey Peter - so a "bottom scroll" bar only appears when the width of the item is larger than the device screen as you hinted. You can wrap both the two grids into a DIV block (or the parent DIV like the section) and set that DIV block to have 100% width with overflow set to none. Hope that helps if not just let me know :)

[@peterpaul6953]

@@dereksiuau will try that tomorrow. I guess this is it. Thank you for the hint

[@kmh0201]

I added two extra grid duplications for more logos. The first and last rows are the same, so the animation works great. However, now my screen scrolls over to the right all the way down the line of logos. Can you only do this with two grid duplications? I considered making the first grid hold all logo images and setting it to 300% then duplicating that grid row. Do you think that would work, or do you have an easier solution from where I am now? Thank you for this! Very helpful!!

[@dereksiuau]

Hey - thanks for the comment, as long as. the maths adds up that should work! So the main div that is wrapping everything should ideally be set to 100% width with overflow set to none (so there will be no horizontal scroll) then the grids you have should be 100% width with the parent div set to flex horizontal - no stretch or no wrap. Then finally the animation will depend on the amount of grids you have. Hope that makes sense - it's hard to troubleshoot your solution based on text. So if you are still struggling with anything just send me your read-only link and I will try my best to answer. - Derek

[@kmh0201]

@@dereksiuau you're my hero today thank you so much. works perfect

[@dereksiuau]

@@kmh0201 awesome 👌

[@madalenacarneiro93]

I'm struggling after minute 5. Instead of rotating to the end when I move the margin it adds to the spacing between the items or makes it smaller. Help!

[@dereksiuau]

The main goal of this tutorial (and all my tutorials) is to explain the "premise". In code there are many ways to do things. I would suggest to follow exactly step by step and understand what is happening, then explore other solutions. But what you have described seems like the "items" don't have a set size, I would recommend using a GRID as it auto calculates the size. But again many ways to do things. If you are still stuck you can share with me your read only link and I can take a look when I get the chance :D

[@pierretucoulat8587]

Thanks a lot derek ! I have a small problem the other grid is also appearing on the right side of the screen, how can i solve that ?

[@dereksiuau]

Make sure for the wrapper you set to 100% width (or whatever you want) then add overflow none (that will crop / mask everything ) Let me know how you go!

[@janmotycka]

What if the pictures/logos wont fit on one screen, how do I have to adjust it so I dont get this wierd rollback in the animation?

[@dereksiuau]

Perhaps, you need to adjust the grid accordingly and perhaps for each picture / logo set an appropriate width and height.

[@ervczek]

Hi! In my case, on smaller devices when the animation comes to the looping moment, I experience some kind of "refresh" that lasts just for a fraction of a second, but it's really noticeable. I have a longer wrapper with 11 logos, repeated a couple of times. Do you know if it's just webflow's way of dealing with this? Or maybe I am missing something?

[@dereksiuau]

Something should be "missing" perhaps a small 0.5sec transition delay or the loop is not perfect.

[@shakeme14]

LOVE THAT VIDEO BUT IF I HAVE MORE IMAGES HOW CAN I DO IT? BEACUSE I TRIED BUT IT SEEM LIKE I AM DOING IT WRONG PLEASE HELP

[@dereksiuau]

I understand your frustration. If you understand the concept / premise of what I explained in the video you just need to use basic maths to ensure it's a perfect loop. So if you have more images you will need to ensure: 1/ It has perfectly repeated images on rotation 2/ The animation timing (move interaction) is set appropriately). I would suggest to follow my tutorial again 1:1 to understand the concept then explore adding more logos and experimenting how to do that. If you still struggle LMK!

[@shakeme14]

i watched the video again and now my web works perfectly ! thanks so much

[@ikelong]

Please tell me the names of apps or web services that have various logos.

[@dereksiuau]

If you are referring to website examples with a logo marquee section - a lot of them have it. For example Webflow itself: webflow.com/

[@georgebishop9690]

Would that work if logos are pulled from a CMS?

[@dereksiuau]

Great point! That is a bit more tricker (extra step) but same concept / principle. Calculate the logos and make them work in a logo marquee fashion. Sometimes you may not have enough logos to make a perfect loop, if that is the case you will need to repeat some logos.

[@digitse-learning5125]

can i replicate this on wordpress elementor page using the elementor HTML widget?

[@dereksiuau]

This tutorial was specifically for Webflow (and perhaps hand coding HTML / CSS / JS) if you are using WP and elementor, I'm sure there is a plugin that has this effect you can use.

[@jamilahmad1277]

How to make it so its scroll from left to right?

[@dereksiuau]

You just reverse the interaction as seen in the tutorial. LMK how it goes.

[@jamilahmad1277]

@@dereksiuau Yes its worked, thanks

[@mahdikaaniche9986]

GOAT

[@dereksiuau]

Hahaha

[@xnikisaurus]

Why does my marquee flash at the end when it resets?

[@dereksiuau]

Perhaps it's the last interaction transition from the first. transition (loop period) maybe you set it to have a delay or duration? It should be instant (ie. 0sec)

[@chamythos]

I have a large blank space on the right side and I don't know how to make it unaffected when publishing

[@dereksiuau]

Send your read-only link and I can advise.

[@LouisaSilberg]

thanks for this great video!@@dereksiuau I have the same problem. Any solution here?

[@dereksiuau]

@@LouisaSilberg It's probably the fact you need to set the parent container to have a width of 100% (width of the screen) and overflow to hidden (so it crops out the large blank space)

[@judepinto6968]

what isnt it working for bigger sized images, i have about 12 images with a width of about 512 px

[@kyliemena6869]

same i was hoping there'd be a solution for this because I have a lot of images

[@dereksiuau]

Fantastic Query! The tutorial was to show the main premise I can't really cover all the variants. In your case, you may have to use another size eg. instead of using a fixed 512px maybe use percentage or VW. Hope this helps. As long as you understand the premise of the video you should hopefully be able to find a workaround yourself :D If not I will try my best to help just keep me updated :D

[@arupde6320]

upload in 1080

[@dereksiuau]

Noted future videos recorded are now in 1080p.

[@niravrk5446]

Easy CSS / HTML thing making more complicated in webflow 🤔

[@dereksiuau]

Hahaha - Just a different interface and way of code (visually) same premise really.

[@rodoshirahman321]

your tutorial does not work

[@dereksiuau]

Sorry to hear that, this was a very specific technique (ONE way of doing it) I plan to revisit this in the future.

[@richyfennell]

On desktop the horizontal scroll bar seems to be moving with the animation. The screen is OK and doesnt show any white space on the right, just the bottom scroll bar is contstantly moving. Any ideas?

[@dereksiuau]

There should be no horizontal scroll bar (unless that's the effect you want) i suspect you need to apply 100% width to the parent div with overflow hidden (clips everything) - this should remove the horizontal scroll. Let me know how you go!

[@ekmedia.]

@@dereksiuau I have the same issue and I set the width to 100% and hid the overflow, but now I don't get the second grid. It just scrolls into abis

[@nathandemoura8544]

@@dereksiuau When I do that, in fact the horizontal bar disappears. However, the second grid doesn't show up on the animation. It keeps scrolling, but no logo appears. Do you have any idea why? Thank you!