How to Properly Edit a Marquee Logo Bar for Equal Animation

Hazel L. · 2025-08-27T03:25:09.043Z

Hey guys! What should be the correct way to edit a marquee logo bar? So I deleted away two logos from Logo 3 template because there's only so many we have for now. But with that I seem to screw up the animation and now there is a gap in between. The gap between each logo doesn't seem to be equal too probably because the logo size of each is different? What width and height should I crop each logo into? This is the preview link of my site: I would like to learn the proper way to edit marquee logo bar so the animation works every time no matter how many logos we have. Thank you!

Matt J.
·
·
Hazel L. I actually have a loom video on exactly this. https://relume.notion.site/Customizing-Logo-3-40339077145f4bcf964676eb4e5e7e2b?source=copy_link If you're still finding some issues with this, I've found that using just vanilla CSS tends to have more consistent results. Keep in mind that a marquee definitely has its limits but its based on how long a user will be sitting there starring and scrolling logos - not a technical limitation, but just a UX consideration.
Hazel L.
·
·
Thank you. So what if I want to reduce the numbers of logo rather than adding more? By default you have 8 but I only need 6.
Hazel L.
·
·
I have to reduce both the grid and delete the image wrapper on the sidebar?
Hazel L.
·
·
I'm a bit confused though. You mentioned that it depends on how many columns we have and the width of it. We have 8 columns each is 12.5REM, that's only 100? How did we come to 112 in the animation?
Matt J.
·
·
I believe the gap between the logos yeah?
Matt J.
·
·
I'd have to watch the video again its been awhile since I created it but honestly it might not be helpful, I didn't realize you were wanting to reduce the number, so you'd have to adjust all of the math accordingly
Matt J.
·
·
but it would honestly make more sense to just use the CSS version instead.
Matt J.
·
·
hmm yeah, I walked through the entire equation as well as both adding and removing logo scenarios in that video
Hazel L.
·
·
sorry what is the CSS version?
Hazel L.
·
·
Yeah, ok I get it now, it's 1.5 rem gap + 12.5 rem width. But to reduce the number what I want to make sure is I have to delete both the wrapper on the sidebar and the number of grid correct? Both sides have to tally?
Matt J.
·
·
correct
Matt J.
·
·
I mentioned the CSS version in my original reply above
Hazel L.
·
·
OK, I will need a little bit of guidance here. How do I use the CSS in this case? Because right now I already adjusted the animation REM to -84 based on the number of columns I have (6 x 14REM), but on big screen it's still have this big gap, it seems to work fine on the laptop screen.
Matt J.
·
·
okay, I can record a loom on the CSS version - but will need some time to get it setup so I can make it generic and reuse it for when this comes up again since I've had this come up several times in the future, I should have had this video created already.
Matt J.
·
·
hopefully you have other parts of the site to work on for now or?

How to Properly Edit a Marquee Logo Bar for Equal Animation

23 comments

How to Properly Edit a Marquee Logo Bar for Equal Animation

23 comments