@synqro/infinite-logo

Create a seamless infinite scroll banner in Webflow to showcase logos or text with customizable speed, direction, and hover pause functionality.

Installation in Webflow

1. Add the script to your site

   Go to Project Settings → Custom Code → Footer Code and paste:

   <!-- [Synqro Labs] Infinite Logo -->
   <script src="https://cdn.jsdelivr.net/npm/@synqro/infinite-logo@1/dist/index.min.js"></script>

2. Create the structure in Webflow

   Create a Div Block (the banner container) with overflow: hidden, then inside add another Div Block (the banner list) set to display: flex. Place your logos inside the list.

3. Add the custom attributes to the banner list

   Select the inner Div Block (the list) and add the sl-banner-list attribute.

4. Publish your site

Custom Attributes

Select the banner list element, then add these custom attributes:

| Attribute | Value | What it does | | ------------------- | ------------------------- | ------------------------------------------------------------------ | | sl-banner-list | infinite-logo | Required. Activates the infinite scroll. | | sl-banner-speed | 30 | Scroll speed — seconds to scroll 1000px of content (default: 10). | | sl-banner-direction | left or right | Scroll direction (default: left). | | sl-banner-hover | true | Pause on hover (default: false). | | sl-banner-gap | 20px, 2rem, etc. | Spacing between logos. |

Tips

• The container (parent) should have overflow: hidden to hide the cloned logos
• The list (child with sl-banner-list) should be display: flex
• Higher sl-banner-speed value = slower scroll
• The speed is consistent across screen sizes — same visual speed on desktop and mobile
• Works with images, SVGs, text, or any element inside the list