Animation • v1.2.0

@synqro/infinite-logo

Seamless infinite scroll banner for logos, text or any content.

Clones the content, positions it on a seamless loop and animates with CSS transforms. Waits for all images to load before measuring, so speed is consistent across screen sizes.

Install • Paste in Project Settings → Custom Code → Footer

HTML

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

Installation

1
Add the script to your Webflow project. Go to Project Settings → Custom Code → Footer Code and paste the snippet above.
2
Add the custom attributes to the relevant elements in the Webflow designer — see the table below.
3
Publish your site. The script initializes automatically on DOMContentLoaded.

Configuration

Select the element in the Webflow designer and add these custom attributes under the Element Settings panel.

Attribute	Value	Description
Required	`infinite-logo`	Activates the infinite scroll on the container.
	`30`	Seconds to scroll 1000px of content. Same visual speed on desktop and mobile.
	`left \| right`	Scroll direction. Default: left.
	`true \| play`	true: pause on hover. play: paused by default, scrolls only while hovered, and resets to the start when the cursor leaves.
	`20px, 2rem, etc.`	Spacing between items.

Examples

Logos banner

HTML

<div class="banner-container" style="overflow: hidden">
    <div
        class="banner-list"
        sl-banner-list="infinite-logo"
        sl-banner-speed="20"
        sl-banner-gap="40px"
        style="display: flex"
    >
        <img src="logo1.png" alt="Logo 1" />
        <img src="logo2.png" alt="Logo 2" />
        <img src="logo3.png" alt="Logo 3" />
    </div>
</div>

Reverse direction with hover pause

HTML

<div class="banner-list"
    sl-banner-list="infinite-logo"
    sl-banner-direction="right"
    sl-banner-hover="true"
>
    ...
</div>

Play only on hover (paused by default)

HTML

<div class="banner-list"
    sl-banner-list="infinite-logo"
    sl-banner-hover="play"
>
    ...
</div>

Tips & notes

The parent container should have overflow: hidden.
The list (with sl-banner-list) should be display: flex.
Higher sl-banner-speed value = slower scroll.
sl-banner-hover="play" keeps the banner still until hovered, then resets to the start when the cursor leaves.