How can I create a scrolling effect for a section with multiple company logos of varying widths in Webflow?
TL;DR
- Build a horizontal flex wrapper with overflow hidden and insert a logo track div containing your logos as image elements with individual sizing.
- Duplicate the logo track for a seamless loop and apply a looping leftward Move animation with linear easing on page load.
To create a scrolling effect for a section with multiple company logos of varying widths in Webflow, use a horizontal scroll or marquee-style animation.
1. Prepare Your Logo List
- Upload or add all logo images in your Assets panel.
- Use transparent or white backgrounds (depending on your site design) to ensure consistency.
- Convert logos to SVG where possible for better scaling and smaller file sizes.
2. Build the Scrolling Container
- Add a
Div Blockto your page where you want the scrolling logos. - Name it something like
Logo Scroll Wrapper. - Set the overflow to
hiddento mask anything that scrolls outside the area. - Set display to
flexif logos need to be horizontally aligned.
3. Insert the Logos
- Inside the wrapper, add another
Div Block(e.g.,Logo Track) to hold the actual logo set. - Set
Logo Trackto display: flex, width: auto, and white space: nowrap. - Drag and drop Image elements (not Background Images), add your logos, and set their widths individually (or max width) to accommodate varying sizes.
4. Use Infinite Scroll Animation (Marquee Style)
- Duplicate
Logo Trackand place the copy right after the original in the same scroll wrapper. - This creates a loop effect when scrolling continuously.
- Select
Logo Track, go to the Interactions panel and create a Page Load animation. - Use Move animation to translate the
Logo Trackto the left by 100% over a set time (e.g., 20–30s depending on how fast you want it). - Set it to Loop infinitely and use Linear easing for smooth continuous motion.
5. Ensure Responsiveness
- Adjust the image sizing (e.g., % or VW) to maintain visual consistency across devices.
- Add padding or margin if logos are too tightly spaced.
- Use Webflow’s breakpoints to fine-tune spacing or speed as needed.
6. Optional — Use Webflow's Lottie Support or Custom Code
- For more complex marquee or hover pause effects, you can use a Lottie animation or light JavaScript.
- Or use Webflow's native CMS to dynamically load logos (if they’re client-controlled).
Summary
To create a scrolling logo section with varying logo widths in Webflow, build a horizontal flex wrapper, duplicate the logo track, and animate it using a looping Move interaction with linear easing. Ensure logos are proportionally sized and responsive for best visual impact.
