@aw-webflow/logo_marquee_animation

Infinite, constant-speed horizontal marquee of customer logos for a Webflow page. Pauses on hover, rebuilds on viewport width change, and re-measures once lazy SVG/img logos decode.

Lifted from @aw-webflow/ess_page_js (BLOCK 1), originally ai_workforce_home/script.js -> initCustomerLogosMarquee().

Required Webflow markup

<div class="custo-logos-wrapper">
  <img src="logo-1.svg" alt="Customer 1">
  <img src="logo-2.svg" alt="Customer 2">
  ...
</div>

The wrapper's CSS gap / column-gap sets logo spacing — the script reads it and reuses the same value between cloned copies (falls back to 24px).

Every matching wrapper on the page gets its own marquee, and a wrapper that is hidden or zero-width at load is retried once it becomes visible.

Dependencies

• GSAP core (no plugins) must load before this script. The script waits up to 2s for window.gsap and silently does nothing if it never appears.
• prefers-reduced-motion: reduce skips the marquee entirely; logos stay static.

Usage via jsDelivr CDN

Add this to the Webflow page's custom code (before </body>, after GSAP):

<script src="https://cdn.jsdelivr.net/npm/@aw-webflow/[email protected]/script.min.js"></script>

Always pin an exact version — jsDelivr caches aggressively, so bumping the version in the URL is what makes a change go live.

Deployment Workflow

1. Push changes to GitHub.
2. Bump the version in package.json.
3. npm publish --access public
4. jsDelivr serves the new version automatically.
5. Update the <script> tag in Webflow to the new version number.

Local Development

npm install
npm start

npm start runs Parcel against script.js.

Tuning

Config constants live at the top of script.js:

| Constant | Default | Meaning | |---|---|---| | WRAPPER_SELECTOR | .custo-logos-wrapper | Which elements become marquees | | SPEED | 40 | Scroll speed in px/sec (constant regardless of logo count) | | FALLBACK_GAP | 24 | Gap in px when the wrapper has no CSS gap | | GSAP_WAIT_MS | 2000 | How long to wait for GSAP before giving up |