How can I create an infinite marquee in Webflow where users can adjust the scrolling speed?

You can create an infinite marquee in Webflow using interactions and custom speed controls with a slider or input. Here’s how to build it and give users control over scroll speed.

1. Build the Marquee Structure

• Add a div block and name it Marquee Wrapper. Set overflow: hidden and white-space: nowrap.
• Inside the wrapper, add another div block called Marquee Content. Add all your marquee items (texts or images) inside this.
• Duplicate the marquee items once to make the scroll loop seamless.

2. Set Up Marquee Animation

• Select the Marquee Content, go to the Interactions panel, and add a Page Load animation.
• Add a Move animation:
• Set initial position to 0% horizontal.
• Add a second keyframe with -50% horizontal movement (or enough to scroll one full duplicate cycle).
• Set duration (e.g., 10s) and Loop to infinite.
• Use Linear easing (no easing) to maintain smooth, continuous scrolling.

3. Add Speed Control UI

• Add a range slider element below or above the marquee. Name it Speed Slider.
• Set min to 1, max to 20, and default to 10 (represents speed level).

4. Use Custom JavaScript for Dynamic Speed

Since Webflow interactions don’t support dynamic speed natively, use JavaScript to change animation duration based on slider input.

• Add an Embed component or go to Page Settings > Custom Code > Before , and insert inline JS like:

const slider = document.getElementById('speed-slider');const marquee = document.querySelector('.marquee-content');let animation;function updateMarquee(speed) {  const duration = 21 - speed; // Inverse to slow down at lower values  marquee.style.animation = `scroll-left ${duration}s linear infinite`;}// Initial setupdocument.addEventListener("DOMContentLoaded", function () {  updateMarquee(slider.value);  slider.addEventListener('input', (e) => {    updateMarquee(e.target.value);  });});

Important:

• Replace .marquee-content and #speed-slider with the actual class name and ID used in your Webflow project.
• Define @keyframes scroll-left in the Page Settings > Custom Code > Head as:
  @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

5. Style the Marquee with CSS

Add CSS to keep the animation running smoothly:

• Ensure Marquee Content has display: inline-block and is wide enough to hold all items + duplicates.
• Make sure all elements inside are inline or floated to the left.

Summary

To create an infinite marquee with adjustable scrolling speed in Webflow:

• Use structure with duplicated content inside a hidden wrapper.
• Apply a looping Webflow interaction or CSS animation for continuous scrolling.
• Add a range slider and use custom JavaScript to dynamically adjust the scroll speed.

This method results in a seamless, speed-controlled marquee experience for your users.