The ultimate FAQ and "good to know" list for Marquee.

Do not remove the attributes added to generated elements. If they are removed, the solution will stop working.

To keep the app functionality and edit mode working, keep all elements of the Marquee component inside the instance element.

The Marquee will not function inside Webflow Designer because it requires JavaScript. Publish your project to webflow.io and see the Marquee working properly.

Finsweet Components doesn't rely on classes to work. You can change, rename, and duplicate classes however you want. You have full control over the class organization and naming convention of your Marquee.

You can enter "edit mode" for any Component by selecting the component in Webflow Designer and opening Finsweet Components. You can change many options to update your Marquee at any point in the development process.

To prevent Component issues, some options are disabled in edit mode. If you need a disabled option, please generate a new Marquee.

You can select any Marquee instance wrapper, copy it to the clipboard, and paste it within the same Webflow project, all instances will function normally.

Duplicating a marquee this way will keep all instances of it synchronized, as they're sharing the same instance value: if you make an edit to the settings of one of its instances in the Marquee Component App, e.g., changing its speed, the changes will propagate to all the other instances.

If you've spent time styling a marquee and want to create another one with the same look but different settings, you can create a new Instance manually.

1. Select the Instance element of the marquee you want to duplicate, and duplicate it (Cmd/CTRL+D).
2. Select the Instance element of the duplicate, open the Settings tab, and change the value of the fs-marquee-instance Custom Attribute to a completely new value.
3. With the Instance element still selected, open the App, change the settings and apply them.

You now have two different marquees with the same fine-tuned look.

Smooth motion depends on the number of elements on a page and the weight of the content. In some cases, achieving perfectly smooth motion is very challenging. We recommend using optimized images and avoiding an excessively large number of items.

In the Item element, adjust the width, max-width, or min-width to control the size of each Marquee content and the number of items displayed in view. For example, setting the item width to 25% will display 4 items per view in your Marquee.

In the list element, adjust the gap to control the space between Marquee items. You can use both dynamic and fixed units.

Use the Webflow Style panel to customize your Marquee elements. There are no design limitations for Finsweet Components.

However, we suggest not styling the marquee base elements (Instance, List Wrapper, List and Item) directly to avoid problems with sizing and looping. You can create all the looks and layouts you need by only styling elements inside the Item element, and outside the Instance element.

The same applies to adding Interactions: add them to content inside the Item element, and to the entire marquee outside the Instance element. For example, if you want to make the marquee slant across the page, apply the transforms to a wrapper of the Instance element, and set the necessary overflow options on that wrapper.

‍

The Initial Fade In animation may cause conflicts with Webflow interactions. Avoid using them if you want to include the Initial Fade In animation in your Marquee component.

Our Marquee is a flexible, infinite scrolling Component that creates smooth, continuous scrolling content in four directions: left-to-right, right-to-left, top-to-bottom, or bottom-to-top. Built from scratch in TypeScript, it ensures seamless, fully responsive infinite scrolling while adapting to your custom styling and design.

The Marquee offers customization options such as pause-on-hover, fade-in animations, and variable scroll speeds adjustable at different breakpoints. Finsweet Marquee automatically adapts to various screen sizes and pauses when the browser tab is hidden, enhancing page performance and conserving browser resources.

If you’re loading images within your Marquee, please avoid using the lazy loading option. Instead, set Eager as your default image loading strategy.

Lazy loading is problematic for our Marquee since images loading is defered and hence may not load on time so that our Marquee component can compute the dimensions of the Marquee correctly.

<img src="image.png" loading="lazy" /> ❌ BAD

<img src="image.png" loading="eager" /> ✅ GOOD