How can I create a smooth transition for an infinite marquee slider on my Webflow website?
TL;DR
- Create a section with a hidden-overflow wrapper and a flex, no-wrap track containing duplicated marquee items.
- Apply a linear, infinite-loop horizontal move animation to the track for smooth, continuous scrolling.
Creating a smooth infinite marquee slider in Webflow involves combining continuous horizontal scroll animation with seamless looping. Here's how to do it using Webflow's native tools and layout features.
1. Structure the Marquee Layout
- Add a Section to contain your slider.
- Inside the section, add a Div Block (name it something like
marquee-wrapper). Set: - Overflow: Hidden
- Width: 100%
- Inside the wrapper, nest another Div Block (e.g.
marquee-track) that will animate horizontally. Set: - Display: Flex
- White Space: No Wrap
- Inside
marquee-track, add your repeated content/images and duplicate them so the loop appears seamless. These could be logos or texts that repeat, like “Client 1, Client 2, ...”
2. Design Your Marquee Items
- Ensure all marquee items (e.g., logos or text blocks) are the same width or sufficiently spaced so the content loops cleanly.
- If dynamic, use a CMS Collection List, but make sure the content can loop without a visible gap.
3. Create the Infinite Scroll Animation
- Go to the Interactions panel, and create a Page Load animation or a Continuous Animation.
- Select the
marquee-trackand apply a Move animation. Example: - Initial State: X =
0% - Final State: X =
-50%(assuming your track is twice the content width; adjust as needed) - Duration: E.g. 20s
- Easing: Linear for smooth and consistent motion
- Loop: Set the animation to infinite loop
4. Duplicate Content for Seamless Loop
- To prevent gaps at the end of the loop, ensure the
marquee-trackcontains duplicated content. For example: - Original group: Item A, B, C
- Duplicate: Item A, B, C again directly after
- This ensures that when the track moves left, it seamlessly transitions back to the start when restarted.
5. Optional: Adjust for Responsiveness
- Use VW units or percentage-based widths for items to scale with screen size.
- On mobile, consider adjusting animation speed or stacking layout if horizontal scroll becomes ineffective.
Summary
To create a smooth infinite marquee slider in Webflow, wrap duplicated items in a horizontally scrolling track, use a linear, looping Move animation on the track, and ensure the container hides overflow. This creates a seamless, continuous sliding effect without visible gaps.