MARQUEE DOCS

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

About the Component

Do not remove the attributes. They are required for the Marquee component to work.

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

Do not move the Marquee elements outside the instance wrapper.

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

Do not export the code and host the website on an external server.

Currently, Webflow still doesn't allow us to export the website code with the script generated by our app needed to make the components work. In this case, if you export the code from Webflow and host your website on your own server, Finsweet Components will not function.

You can't preview the Marquee functionality in Webflow Designer. Only on the published website.

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

You can make changes to classes generated by Finsweet Components app.

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.

Edit the Marquee settings by selecting the wrapper and opening the app.

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.

Manually copy and paste your Marquee instance in Webflow Designer as needed.

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.

Create a new marquee from duplicating an existing one

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.

The smoothness of the Marquee motion varies depending on the content.

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.

About styling & interactions

Change the width of the item to control the size of Marquee items and the number of items per view.

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.

Change the gap of the list to control the space between the Marquee items.

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

Style and customize the Marquee component however you want.

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.

‍

Do not use Webflow interactions if you are using the 'Initial Fade In' animation.

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.

How Marquee technically works

Built from scratch in TypeScript.

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.

Avoid using the lazy loading option.

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

About the plans

Is there a limit to the number of instances of a Component per project?

No, there is no limit to the number of instances of a Component you can use in a Webflow project. As long as you have a subscription or a Single Site Lifetime plan, you can use as many instances of the Component as you want in your published website.

Is there a limit to the number of Component loads on a website?

No, there is no limit to the number of loads on a website. Both staging and custom domains support unlimited loads per month.

Do I need a paid plan to use the Finsweet Components app?

No, the Finsweet Components app is free to access and use. You do not need a paid plan to generate the Components in Webflow canvas and publish them to your staging webflow.io domain. However, you will need a paid plan if you want to publish Components on your custom domain.

How can I instruct my client to get a subscription for their project?

In your client's project, open the Finsweet Components app and click the 'Get a subscription' button to go to the checkout page. Copy the checkout link and send it to your client so they can complete the purchase. After the payment is complete, your client will still need to open the subscription and connect the domain that will use the Components.

Can I use Components in a Webflow project connected to multiple custom domains?

Yes, Components will work normally in a Webflow project connected to multiple custom domains, as long as you have an active plan connected to one of the domains in use.

Do Components work on websites with a reverse proxy?

Yes, Finsweet Components work normally on websites using a reverse proxy, as long as you have a paid plan connected to the domain.

What is a Single Site Lifetime plan?

Finsweet Components with a Single Site Lifetime plan will work on the published website forever after a one-time payment. You purchase a Single Site Lifetime plan, set the domain name, and the Component will work on that domain permanently — with no additional costs or future payments.

You can have a Single Site Lifetime plan for a specific Component or for a bundle that includes all Components.

What happens if my domain name changes when using a Single Site Lifetime plan?

You can change your domain name at any time in the future, as long as it's for the same project or company. When you're buying Single Site Lifetime plan, you're buying the ability to use the Component for the lifetime of the project. We'll be lenient with domain changes, but will not allow abuse of the pricing model. We will not accept domain name changes that are clearly for different projects.

Will new Components released in the future be included in the All Components Bundle plan?

Yes, new Components added to the Finsweet Components app will work automatically when released, in case you have an All Components Bundle plan connected to your website.

The price of the All Components Bundle plan will increase as new Components are added to the app, so this is a great way to lock in a lower price for your website.

Can I change domain names using an Agency Plan?

Yes, you are free to change domain names at any time if you have an Agency Plan.

How do Agency Plans work?

Agency Plans are yearly subscriptions that allow you to use unlimited Components in a specific number of projects per year, along with extra Library features. These include sharing access to the Library with your team, creating folders, and saving Components to the Library.

For example, with the Agency Lite Plan, you can use all our Components in 24 websites per year. When your plan renews the following year, you will be able to use them in 24 more websites for that year.

Can I cancel my Agency Plan subscription at any time?

Yes, you can schedule the cancellation of your Agency Plan yearly subscription at any time. Your subscription will remain active and function normally until the end of your billing period. After that, it will be cancelled. All domains connected to the cancelled subscription will continue working normally, forever.

What happens if I purchase an Agency Plan and change my mind?

We offer a 100% refund policy within the first month of your Agency Plan purchase. If you change your mind within the first 30 days, you can request a full refund. We do not offer refunds after the 30-day trial period.

Note: If a refund is issued, the domains connected to the refunded plan will stop working.

Why are monthly subscriptions not allowed for Agency Plans?

Good question. We decided to allow only yearly payments to build long-term relationships with our users, reduce the need for additional controls, and prevent abuse.

Why is the Cookie Consent Component not included in the Agency Plans?

The Cookie Consent Component is not included in Agency Plans because it will be migrated to a new product soon. This new product will have its own pricing model. See the full announcement here.

Can I downgrade my Agency Plan?

Yes, you can downgrade your Agency Plan at any time. The changes to how your plan works and the number of available domains will take effect at the end of your billing period. When you downgrade to a more limited plan, the only change is that you will have fewer domains available to use in the following year. All domains from your current Agency Plan will remain available.

For example, if you have an Agency Pro plan with 48 websites/domains per year and downgrade to the Lite plan with 24 websites/domains per year, you will still keep your 48 domains from the current plan. In the following year, your new Lite plan will give you 24 new domains to use.

What happens if I use all the domains available in my Agency Plan?

If you reach the domain limit of your Agency Plan, you have two options: upgrade to a higher Agency Plan with more domains available per year, or purchase individual Single Site Lifetime plans.

What if my domain name changes in my current monthly or annual subscription?

If you have an active monthly or annual subscription, you can change your domain name at any time while your subscription is active. To use your subscription with a different domain, go to my.finsweet.com/subscriptions, find your subscription, and update your site domain URL.

What will happen to my current subscription for all components?

The special launch offer with the 'all components' subscription is no longer available. Subscribers to this plan will keep the $10 monthly price for all current and future components as long as they maintain the subscription.

What happens if my current monthly or annual subscription expires?

If your monthly or annual subscription expires, the Components used on your website will stop working. They will resume working when you reactivate your subscription. We will reach out to you many times before 'turning off' Finsweet Components in your project. We will not show a broken Component on your project. Instead, we will completely remove the entire Component from the page.

Do I have access to Consent Pro with my legacy All Components subscription?

Yes, if you have the legacy All Components subscription, you will continue to have access to all Finsweet components, including Cookie Consent and Consent Pro.

Will my current Cookie Consent plans migrate to the new Consent Pro app?

Yes. All current Cookie Consent licenses will be migrated automatically to Consent Pro. If you are an active user of Finsweet Components - Cookie Consent, the Consent Pro app will work normally for you, with no migration process needed.

Still need help?

Get Support

Watch Tutorial