How to Create an Infinite Marquee in Webflow

This instructional video provides a comprehensive update to the popular "infinite marquee" solution for Webflow, empowering users to implement sophisticated scrolling animations using a completely no-code approach. The core value of this tutorial lies in its ability to eliminate the need for writing JavaScript; instead, viewers achieve full configuration—including scroll direction and speed—directly through custom attributes applied within the Webflow designer. This ensures that even users without coding knowledge can deploy high-performance, continuous animations that integrate seamlessly with Webflow’s native interactions.

The guide introduces several advanced features that significantly enhance design flexibility and user experience, such as smooth pause-on-hover, drag toggling, and specific styling for the "active" slide within the marquee. Users will learn how to ensure full responsiveness by setting unique speeds for different breakpoints, preventing layout issues on mobile or tablet devices. Additionally, the video demonstrates how to apply these techniques to both static content and Webflow CMS Collections, allowing for dynamic, data-driven marquees.

Finally, the tutorial prioritizes implementation standards and accessibility. It outlines a strict class-naming convention based on the Splide library—requiring specific classes like splide__track and splide__list—to ensure functionality. The viewer will also master accessibility best practices by learning how to apply aria-label or aria-labelledby attributes, ensuring the marquee is usable for all site visitors. The process concludes with a simple copy-paste workflow for the necessary script, requiring no further modification by the user.

• Attribute-Based Configuration: All marquee settings, including speed (fc-marquee-speed) and direction (determined by positive or negative values), are controlled entirely through Webflow attributes, removing the need to edit JavaScript code.
• Mandatory Class Structure: Successful implementation requires a rigid structure where specific elements must be named splide, splide__track, splide__list, and splide__slide for the underlying library to recognize and animate the content.
• Granular Responsive Control: Users can define breakpoint-specific behaviors using attributes like fc-marquee-[breakpoint]-speed (e.g., mobile or landscape), ensuring the animation speed feels natural across all device sizes.
• Active State Styling: The new update allows designers to visually distinguish the current "active" item in the marquee using the is-active class, enabling effects like scaling, opacity changes, or removing grayscale filters for the center element.
• Advanced Interaction Options: The system supports advanced toggles such as fc-marquee-enable-pause and fc-marquee-enable-drag, giving creators full control over whether the marquee reacts to user hovering or dragging.

• 02:15 – Setting the section overflow to "hidden" to prevent unwanted horizontal scrolling.
• 02:34 – Adding the mandatory splide combo class to the section content wrapper.
• 03:02 – Assigning the mandatory splide__track class to the div block inside the wrapper.
• 03:16 – Applying the mandatory splide__list class to the unordered list element.
• 03:29 – Styling the list by removing bullets, setting display to flex, zeroing margins/padding, and adding will-change: transform.
• 03:45 – Applying the mandatory splide__slide class to the list items.
• 04:07 – Adding 1vh horizontal padding directly to slides to create spacing (instead of using flex gap).
• 04:43 – Adding transitions (transform, opacity, filter) to the slide class to ensure smooth active state animations.
• 06:05 – Configuring the animation speed by adding the fc-marquee-speed attribute to the splide element.
• 06:42 – Setting responsive speeds using breakpoint-specific attributes like fc-marquee-[breakpoint]-speed.
• 07:21 – Creating the is-active combo class in a style guide (or separate element) to define the active state.
• 07:38 – Styling the is-active class: setting opacity to 100%, removing filters, scaling to 1.05, and setting z-index to 1.
• 09:03 – CMS Integration: Applying splide__track to the Collection List Wrapper.
• 09:07 – CMS Integration: Applying splide__list to the Collection List.
• 09:11 – CMS Integration: Applying splide__slide to the Collection Item.
• 09:59 – Disabling the dragging functionality by setting the attribute fc-marquee-enable-drag to "false".
• 10:07 – Disabling pause-on-hover by setting the attribute fc-marquee-enable-pause to "false".
• 10:58 – Improving accessibility by adding an aria-labelledby attribute linked to a heading ID.
• 11:23 – Adding an aria-label attribute to the splide element if no visible heading is present.
• 11:36 – Pasting the required JavaScript code into the "Before body tag" section of the page settings.

This guide outlines the step-by-step process for building a fully responsive, no-code infinite marquee in Webflow. The solution utilizes specific class naming conventions and custom attributes to control behavior without writing JavaScript.

Phase 1: Structural Setup

1. Configure the Main Section

• Time: 02:15
• How: Select your main Section element and set the Overflow property to Hidden.
• Why: This ensures that if the marquee content is wider than the viewport (which it usually is), it will not cause horizontal scrolling on the live page.

2. Initialize the Marquee Wrapper

• Time: 02:34
• How: Select the Section Content Wrapper (the container inside your section) and add the specific combo class: splide.
• Why: The class name splide is mandatory. It acts as the initialization hook for the external library to identify where the marquee begins.

3. Define the Track

• Time: 03:02
• How: Add a Div Block inside the wrapper and apply the class: splide__track.
• Why: This class name is mandatory. It creates the viewing window for the sliding elements.

4. Create the Slide List

• Time: 03:16 – 03:29
• How:‍
  
  • Add an Unordered List inside the track.
  • Apply the class: splide__list.‍
  • Styling: Remove bullet points, set Display to Flex, set margins/padding to 0, and add the property Will Change: Transform.

• Why: The class name is mandatory. Using an Unordered List improves accessibility compared to a standard Div. The "Will Change" property optimizes animation performance.

5. Configure Slide Items

• Time: 03:45 – 03:58
• How: Add List Items inside the list and apply the class: splide__slide. Ensure the flex child settings are set to Don't Shrink and Don't Grow.
• Why: The class name is mandatory. Locking the flex sizing prevents items from resizing awkwardly during the loop.

6. Set Spacing (Critical)

• Time: 04:07
• How: Apply horizontal Padding (e.g., 1vh) directly to the splide__slide class rather than using Flex Gap on the parent list.
• Why: Using the CSS gap property can cause calculation errors and visual glitches in the scrolling animation.

Phase 2: Animation & Configuration

7. Configure Speed and Direction

• Time: 06:05
• How: Select the main splide wrapper element. In the Element Settings panel, add a Custom Attribute:‍
  
  • Name: fc-marquee-speed‍
  • Value: 1 (Left-to-Right) or -1 (Right-to-Left).

• Why: This attribute controls the velocity and direction. Positive numbers move the marquee to the right; negative numbers move it to the left,.

8. Set Responsive Speeds

• Time: 06:42
• How: Add breakpoint-specific attributes to the splide wrapper if needed.‍
  
  • Example Name: fc-marquee-landscape-speed‍
  • Example Value: 0.5

• Why: This ensures the animation doesn't move too quickly on smaller screens (Mobile Landscape or Portrait), providing a better user experience.

9. Create the "Active" State Style

• Time: 07:21 – 07:38
• How:‍
  
  • Create a "Style Guide" element or temporary slide.
  • Add the combo class is-active to it.‍
  • Style it: Set Opacity to 100%, Scale to 1.05, and Z-Index to 1.

• Why: The name is-active is mandatory. The script automatically applies this class to the slide currently in the center of the marquee. This allows you to visually highlight the focal item without writing code,.

Phase 3: CMS & Accessibility

10. CMS Integration (Optional)

• Time: 09:03 – 09:11
• How: To use dynamic content, apply the mandatory classes to the Webflow Collection structure:‍
  
  • Collection List Wrapper → splide__track‍
  • Collection List → splide__list‍
  • Collection Item → splide__slide

• Why: This maps the required Splide structure onto Webflow's native CMS, allowing for dynamic marquees with variable image aspect ratios.

11. Disable User Interactions (Optional)

• Time: 09:59 – 10:07
• How: To prevent users from stopping or moving the marquee, add these attributes to the splide wrapper:‍
  
  • fc-marquee-enable-drag = false
  • fc-marquee-enable-pause = false

• Why: By default, the marquee pauses on hover and allows dragging. These attributes override those behaviors for a continuous, uninterrupted flow.

12. Configure Accessibility Labels

• Time: 10:58 – 11:23
• How:
  
  • Option A: If a visible heading exists, add aria-labelledby="[Heading-ID]" to the splide element.‍
  • Option B: If no heading exists, add aria-label="[Description]" (e.g., "Infinite Marquee Example").

• Why: This ensures screen readers can identify the content within the marquee, meeting accessibility standards,.

13. Implement the Script

• Time: 11:36
• How: Copy the provided JavaScript code and paste it into the Page Settings under the "Before  tag" section.
• Why: This script initializes the library and reads all the attributes and classes you defined to run the animation.

To build a seamless marquee without writing JavaScript, structure your HTML with the specific mandatory classes splide, splide__track, splide__list, and splide__slide on your wrapper and list items. You can then configure the animation direction and velocity directly in the Designer by adding custom attributes like fc-marquee-speed to the main wrapper element.

You can highlight the current slide by creating a styling class named is-active within your project, which the script automatically applies to the centered element during the animation. Define properties for this class—such as opacity: 100%, scale: 1.05, or z-index: 1—to create dynamic focal points that transition smoothly as the marquee scrolls.

Ensure your animation remains responsive by applying breakpoint-specific custom attributes to the main marquee wrapper, such as fc-marquee-portrait-speed or fc-marquee-landscape-speed. These attributes allow you to set unique values (e.g., 0.5 or 1) for different screen sizes, preventing the content from moving too fast on smaller viewports.

Yes, you can power the marquee with dynamic content by applying the mandatory class structure directly to the CMS elements: add splide__track to the Collection List Wrapper, splide__list to the Collection List, and splide__slide to the Collection Item. This setup supports variable image aspect ratios and retains all standard marquee features like drag disabling and speed control.