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

TL;DR

Create a marquee container with overflow hidden and a duplicated content track to enable seamless looping.
Apply a linear, infinite keyframe animation using translateX on the track for continuous scrolling.
Add a range slider input to control speed and use custom JavaScript to adjust animation duration dynamically based on the slider’s value.

To create an infinite marquee in Webflow with user-adjustable scrolling speed, you’ll need to use a CSS animation combined with Webflow interactions and a custom input (e.g. a range slider).

1. Set Up the Marquee Layout

Create a Section or Div Block to act as the container. Give it a fixed width and overflow: hidden.
Add a Div inside for the scrolling content ("Marquee Track"). This will scroll continuously using animation.
Inside the "Marquee Track", drop in your content, such as images, text, or links.
Duplicate the content inside the track, so the content can loop seamlessly.

2. Add Scrolling Animation

Animate the marquee using Webflow's keyframe animation:
Select the "Marquee Track".
Go to the Animations panel ➝ Create new Keyframe Animation.
Animate the transform: translateX() from 0% to -50% (or any needed distance based on content width).
Set animation to:
- Linear
- Infinite loop

3. Create a Speed Control Input

Add a Range Slider element below or beside your marquee.
Set its attributes:
Min: A small number (e.g., 1 for fast)
Max: A larger number (e.g., 20 for slow)
Default/Value: A starting middle value (e.g., 10)
Optionally, label it with "Speed" for user clarity.

4. Use Custom JavaScript for Dynamic Speed

Webflow’s native Animation UI doesn’t support dynamic duration changes, so you’ll need a short custom script:

Add an Embed element anywhere on the page (e.g., in the Footer).
Inside the Embed, add JavaScript to:
Listen to slider input
Adjust the animation duration of the marquee

Example inline logic:

Lower slider value = faster animation
Script updates the duration and applies it via the style.animationDuration property

Example script logic outline (do not include raw code as per instructions):

Get the marquee element by class (document.querySelector)
Get the slider by ID
On slider input event, set a new animation duration like myElement.style.animationDuration = newDuration + 's'

5. Tune and Test

Test different speed thresholds to find an ideal range for user control.
Make sure to match animation duration between both cloned content blocks.
Double-check for seamless looping without jumpy transitions.

Summary

To build an infinite marquee with adjustable speed in Webflow, use a combination of CSS keyframe animation, duplicated content for looping, a user input slider, and a small amount of custom JavaScript to dynamically update the animation speed in real time.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer