How can I create a scrolling effect for a section with multiple company logos of varying widths in Webflow?
TL;DR
- Place all logos inside a flexbox track div with consistent height and auto width, duplicated for seamless looping.
- Wrap the track in an overflow-hidden wrapper and animate its horizontal movement using a linear, looping Webflow interaction.
To create a smooth scrolling effect for a section with multiple company logos of varying widths in Webflow, you’ll use horizontal scrolling with infinite loop animation or marquee-style movement.
1. Prepare Your Logo Assets
- Upload or place all your logo images inside a div block.
- Make sure logos have consistent height (e.g., 60px) and allow auto width, so the variation in widths doesn't break layout.
2. Structure the Section Properly
- Add a Section: Create a dedicated section (e.g., “Logo Marquee Section”).
- Add a Wrapper Div: Set overflow: hidden so that logos scroll behind this window.
- Add a Track Div inside the wrapper: This will be the continuously scrolling element.
- Duplicate Logos: To create a seamless loop, add a copy of the full set of logos directly after the first set inside the track div.
3. Apply Flexbox for Layout
- Set the Track Div (the parent of the logos) to Display: Flex – Horizontal, and align items to center.
- Set logos to inline-flex or just allow them to size naturally with consistent padding/margin for spacing.
4. Animate Scrolling with Webflow Interaction
- Go to the “Interactions” panel.
- Create a Page Load or Timed Animation.
- Select the Track Div and add a Move interaction:
- Start at
transform: translateX(0%) - End at
transform: translateX(-50%)over X seconds (adjust depending on speed) - Set loop = true, easing = linear, and duration so that movement appears constant.
5. Responsive Adjustments
- Ensure that logos are responsive by:
- Setting height in
pxorem - Using
autowidth - Adjusting padding/margins for breakpoints as needed
6. Testing and Refinement
- Preview in the Webflow designer and on multiple breakpoints.
- Adjust the speed/duration so the loop is seamless and visually smooth.
- Make sure logo repetition is long enough to avoid visible jumps.
Summary
Create a horizontal scrolling logo section by combining flex layout, duplicated content for looping, and a Webflow interaction with linear movement. This setup supports logos with varying widths and creates a continuous marquee effect.