Speed
Speed drift across breakpoints
As logos shrink, the loop shortens — the marquee feels faster.
Compare
- Typical behavior:
- Speed drifts across breakpoints.
- broMarquee:
- Speed stays consistent across breakpoints.
broMarquee: Interactive Logo Marquee for Webflow
A free, lightweight infinite marquee for Webflow with full user control: drag, wheel, touch, and inertia.
Why broMarquee
Partner logo sections have become visual noise
Years of autoplay-only logo marquees taught both users and UX designers to tune them out.
Visibility
Desktop-only trust signals
The partner logo section disappears on small screens, even though it matters just as much on mobile.
Compare
- Typical behavior:
- Logos are hidden or removed on mobile.
- broMarquee:
- Logos stay visible and swipeable on every device.
Control
Interactive cues, no control
Users see visual cues to interact, but navigation remains passive.
Compare
- Typical behavior:
- Hover shows details, but the only way to browse is slow autoplay.
- broMarquee:
- Browse at your own pace — drag, wheel, or swipe.
Full Comparison
| Criteria | CSS Animation | Swiper.js | broMarquee |
|---|---|---|---|
| Size | 0 KB | ~150 KB | 9 KB |
| Infinite loop | ⚠️ Manual clones | ✅ Built-in | ✅ Seamless |
| Drag/Swipe | ❌ Static | ✅ Supported | ✅ Supported |
| Inertia | ❌ None | ✅ Built-in | ✅ Physics-based |
| Horizontal scroll | ❌ None | ⚠️ Scroll conflicts | ✅ Smart axis detection |
| Pause on hover | ❌ No easing | ✅ Smooth | ✅ Inertia stop |
| Synchronization | ❌ None | ⚠️ Same direction | ✅ Multi-directional sync |
| Intersection Observer | ❌ Always runs | ⚠️ Manual setup | ✅ Auto pause offscreen (less CPU usage) |
| Responsive speed | ⚠️ Manual @media | ✅ Manual JS | ✅ Attributes |
| GPU acceleration | ⚠️ Manual setup | ✅ Built-in | ✅ Built-in |
| Accessibility | ⚠️ Manual ARIA | ⚠️ Clones read twice | ✅ Auto aria-hidden |
| Setup & config | Custom CSS | JS API | Attribute-based config |
Getting started with broMarquee
Add smooth, interactive marquees to your Webflow site in under 30 sec.
1
Add this <script> inside the <head> tag of your page or project
2
Copy/Paste broMarquee component into your Webflow page
Use a desktop browser to copy the code.
3
Customize with attributes (optional)
Parameter attributes
| Name | Type | Default | Description |
|---|---|---|---|
| bro-marquee-element | "marquee" | "wrapper" | "list" | — | Required. Defines the element role in marquee structure. |
| bro-marquee-speed | number | 0.4 | Animation speed in pixels per frame. |
| bro-marquee-speed-tablet | number | — | Speed override for tablet (≤991px). |
| bro-marquee-speed-mobile | number | — | Speed override for mobile (≤767px). |
| bro-marquee-direction | "left" | "right" | "left" | Scroll direction of the marquee. |
| bro-marquee-clones | number | 1 | Number of content clones for seamless loop. |
| bro-marquee-pause-on-hover | "true" | — | Pause animation on mouse hover with inertia easing. |
| bro-marquee-sync-group | string | — | Group name to synchronize multiple marquees. Supports opposite directions. |
| bro-marquee-mask | "true" | — | Enable gradient fade mask on edges. |
| bro-marquee-mask-tablet | "false" | — | Disable mask on tablet (≤991px). |
| bro-marquee-mask-mobile | "false" | — | Disable mask on mobile (≤767px). |
FAQ
broMarquee is a free, lightweight JavaScript library for building smooth, infinite logo marquees in Webflow — with real user control including drag, wheel, touch, and inertia.
Yes. broMarquee is free and open-source under the MIT License. You can use it in both personal and commercial projects.
Add the broMarquee script via CDN in the HEAD of your page or project.
Then copy and paste the broMarquee component from this site into your Webflow project using Designer mode (see the Get started guide).
The component already includes all required attributes and structure — no manual configuration is needed.
No. You only need to paste the script once. All behavior is controlled via HTML attributes, making it easy to use directly inside Webflow.
Yes. broMarquee supports mouse drag, touch swipe, and trackpad or mouse wheel scrolling. Inertia is applied for a natural, physics-like feel.
Yes. The marquee can autoplay smoothly, and users can override autoplay at any time by interacting with it.
Yes. You can configure broMarquee to pause on hover, keep moving, or remain interactive while hovered — depending on your setup.
Yes. broMarquee works with CMS-driven lists. As long as the items are rendered in the DOM, the marquee can run on them.
You can use multiple marquees on the same page. Each marquee can run independently, or be configured to stay in sync if needed.
Yes. It’s designed to be lightweight and dependency-free. For best performance, use optimized images (SVG or WebP) and avoid excessive item counts.
Yes. Use semantic HTML (lists for logos, links when clickable) and meaningful alt text. Decorative logos can use empty alt attributes.
broMarquee supports all modern evergreen browsers, including Chrome, Safari, Firefox, Edge, and mobile browsers on iOS and Android.
Get in touch
I'd love your help in making broMarquee better 🙌
How to contribute:
-
Share feedback
(suggest improvements or new features)
-
Report bugs
(help identify issues and edge cases)
-
Show support
(react to the announcement post on LinkedIn)
Contact info:
Copied to clipboard 👌