Fixing Logo 3 Component Display Issues in Webflow
·
When I use the “logo 3” component in Webflow, it doesn’t display all the logos, and it’s not looping as expected. Any ideas on how to fix this?
When I use the “logo 3” component in Webflow, it doesn’t display all the logos, and it’s not looping as expected. Any ideas on how to fix this?
I also had some issues with this kind of set up and I don't like the solution from Relume, using webflow interaction. I build my own component with pure CSS for marquees. I thing this is a much better ans scalable solution with less ressource/less code. You will find a lot of videos building CSS marquees in YouTube
Thank you, I will take a look.
This issue was solved. I used right-to-left (RTL) direction in the settings, which caused the component not to work properly. Since this was a center-aligned component, I set the section to left-to-right (LTR) and adjusted only the text component to RTL. I also changed the logo section to LTR, and it now appears properly in the browser.
Hi Matt J., thank you for your answer. Both of the list are the same. Actually, I explained myself badly 🙂 This element loops in the right way, but at some point it ends. There's a space gap and it starts again from the beginning. My client wants to have a seamless loop, without that gap, but i can't seem to find a solution. Here is the link (after the logo Banca Aidexa). thank you for your help
Hi Laura P. I’d like to kindly share my opinion on this issue, but since Matt J. is the master expert here, I’d also appreciate his input if I’m mistaken. First, please note that the logo3_component should have a width of “200vw”. It should contain two identical sets of content (the logos in this case). You have 12 logos, so each logo3_list should contain 12 components (one for each logo3_wrapper). It’s important to set the grid of each logo3_list to 12 columns (currently it’s set to 6) and make sure the size of each grid item is 12.5rem. Next, you’ll need to modify both interactions on the section_logo3: • For the “Scroll into view” and “Page load” triggers, adjust the “Logo 3 [Loop]” interaction. At the 0.00 mark, the X move should be set to -174rem. By applying these changes, you’ll have a seamless loop. Lastly, please check the mobile view to ensure that you maintain the 12-column grid structure. In other words, the two lists will act like identical wagons on a moving train—you won’t notice their transition during the loop.
