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

To create an infinite marquee in Webflow with user-adjustable scrolling speed, you'll need to combine Webflow’s native scrolling animations with custom JavaScript. Here’s how to do it:

1. Structure the Marquee Element

• Add a Section to your Webflow page and name it something like Marquee Wrapper.
• Inside the wrapper, add a Div Block and name it Marquee Track.
• Inside Marquee Track, add another Div Block with repeated content (images, text, etc.) and name it Marquee Content.
• Duplicate Marquee Content within the Marquee Track to ensure a seamless loop.

2. Style the Marquee for Horizontal Scrolling

• Set Marquee Wrapper to overflow: hidden.
• Set Marquee Track to display: flex, white-space: nowrap, and ensure it’s wide enough to contain both Marquee Content blocks.
• Ensure the content itself has no margin or gap between duplicates for perfect looping.

3. Add Custom Animation for Scrolling

• Webflow does not support infinite keyframe-based scrolling natively, so use custom JavaScript to create the loop.
• Go to the Page Settings, scroll to Before </body> tag, and paste the following adjusted inline script:

  ```javascript

  <script>

    const marqueeTrack = document.querySelector('.marquee-track');

    let speed = 50; // Default speed in pixels per second

    let start = null;

    function step(timestamp) {

      if (!start) start = timestamp;

      const elapsed = timestamp - start;

      marqueeTrack.style.transform = translateX(${-1  (elapsed / 1000  speed) % (marqueeTrack.scrollWidth / 2)}px);

      requestAnimationFrame(step);

    }

    requestAnimationFrame(step);

    // Speed adjustment

    document.querySelector('#speedControl').addEventListener('input', function (e) {

      speed = Number(e.target.value);

    });

  </script>

  ```

4. Add a User-Controlled Input for Speed

• Insert a range input on your page and give it the ID speedControl.
• Configure the slider:
• Min: 10
• Max: 200
• Step: 5
• Default value: 50
• Place a label near the input to indicate it's for speed control.

5. Set Classes to Match the Script

• Give your marquee track the class name marquee-track (matching the JavaScript).
• Ensure the duplicated content inside is styled to loop seamlessly.

Summary

You can create an infinite scrolling marquee with adjustable speed in Webflow by structuring your layout with divs, duplicating content for seamless looping, using custom JavaScript to animate movement, and including a slider input (#speedControl) that updates the speed in real time.