How can I create a scrolling effect for a section with multiple company logos of varying widths in Webflow?

To create a scrolling effect for a section with multiple company logos of varying widths in Webflow, you can build a horizontally scrolling carousel or an infinite marquee-style animation.

1. Prepare the Logo Section Layout

• Drag a Section onto the canvas where you want the scrolling logos.
• Inside the Section, add a Div Block and name it something like logo-track.
• Set the logo-track Display to Flex (Horizontal - Row) and Wrap: Off, with overflow: hidden on the parent Div or Section.
• Inside the logo-track, add Image elements or Logo Link Blocks for each company logo.
• Upload your logo images, ensuring transparency and optimized file size for performance.

2. Handle Varying Logo Widths

• Since logo widths vary, avoid setting a fixed width. Instead:
• Let each logo have auto width and a consistent height (e.g., 50px or 60px).
• Use Flex settings (Align center, Justify: Start or Space Between as needed).

3. Create the Scrolling Animation (Marquee Effect)

• Duplicate all logos within the same logo track (add a second identical set of logos right after the first).
• Select the logo-track and go to Interactions, then choose Page Load animation or Scroll animation depending on your preference.
• Set it to Move X-axis from 0% to -50% over a long duration (e.g., 30–60 seconds), then loop the animation.
• Use Linear easing to keep the motion smooth and constant.

4. Make It Responsive

• Ensure the logo images are using max-height or a consistent VW value to scale elegantly across breakpoints.
• Use Webflow’s responsive previews to tweak padding/margin around logos for different devices.

5. Optional: Make Scroll Pause on Hover

• Add a hover interaction on the logo-track or the parent Div Block to Pause Timeline when hovered and Resume Timeline when not hovered.
• This gives users control and avoids distraction when interacting.

Summary

To create a scrolling logo section with varying widths in Webflow, use a horizontal Flex container, duplicate logos to loop the animation, and apply a Move interaction with Linear easing. Disable Flex wrap and use auto-sizing logos with fixed heights to accommodate variances in width, and ensure responsiveness across screen sizes.