Menu
From old cinema signs and Times Square news zippers, to real-time stock tickers, marquees have been around for some time and even invaded the early web. Now, thanks to Finsweet Components, you can add that same vibe to your Webflow projects—no hacks or code required. We’ll share why marquees still fascinate, how to create next-level scrolling effects, and the best ways to keep things smooth, functional, and user-friendly.
What is the Marquee Component for?
Finsweet Components Marquee lets you add scrolling text or visuals to your Webflow site. It’s for designers and developers who need a simple way to highlight announcements, show rotating content, or display real-time data in a fancy way. You can configure everything in a few clicks, without code, while still controlling the design as you would with any native Webflow component.
Note: some demos in this article are only animation representation of real web marquees. To see most of them live, please check our Demos page. And to go into details about how to use the Marquee Component, please refer to the Documentation page.
What is a marquee?
The term “marquee” has roots in the French word “marquise,” which described a large tent or canopy. Over time, theaters adopted this term to name their display signs standing out above the entrance, showing film titles or event names. The idea was to draw attention and get passersby to step inside.
From ticker tape to digital displays, marquees are everywhere
Beyond the theater world, the concept of scrolling messages also comes from old ticker tape machines used in finance. Real-time information was printed on strips of paper, creating a continuous feed of data. Today, LED boards and digital signage have replaced paper strips, showing live updates for stocks, sports, or local news. Marquees are everywhere—from stadium scoreboards to airport info screens—letting organizations share announcements in rolling and dynamic way.
Stock exchanges still use marquee-like displays to showcase current market values. Large LED billboards along highways often include moving text or visuals, catching your eye even at a distance. Businesses use the marquee style to highlight promotions or important messages, showing that the scrolling sign remains a powerful way to grab people’s attention.
The modern revival of the marquee
The moving marquee sign became popular on websites in the early days of HTML. Back then, developers could use the <marquee> HTML element to make text or images scroll across the screen very easily. At first, everyone thought it was a great feature, and you could see it on most websites. But with time, there were problems: it worked differently on different browsers, and it didn't match the new standards for clean, semantic website code. Soon, the HTML element became old and was no longer officially supported, along with other popular tags from the 90's—do you remember the <blink> one?
↑ As some of you can see just above—it depends which browser you're reading this article in—the HTML <marquee> tag is sometimes still supported, but lacks speed, direction, looping control, and fine tuning.
These days, developers use CSS animations or JavaScript tools to create better scrolling effects. These new methods work faster, are easier to use, and look the same on all devices.
You can create a marquee on Webflow websites using only CSS—many people do this—but there are downsides: animation is often jaggy, and looping is rarely perfect.
For our Marquee Component, we decided to use Javascript because it gives you more control and lets us make the feature more stable, with more options.
A million ways to use marquees for
Why should we consider using marquees?
- They're great for fitting long text into a small space without manual scrolling
- They instantly draw attention thanks to constant movement
- They bring a retro flair that feels both fun and nostalgic
- They can fill narrow or empty areas that might otherwise go unused
- They're supported by most modern browsers
- They naturally stands out
One of the best ways to use a marquee is for announcements and alerts. It's a simple way to get attention for important news or promotions. You can also use marquees to show rotating logos, team members, or new products. Adding customer reviews that scroll by can help build trust without being too obvious.
Beyond basic messages, marquees can show live data like sports scores, stock prices, or weather updates. They're also good for system alerts or status updates that need to stay visible. With many ways to use this scrolling effect, a marquee can make a website more dynamic while keeping important information visible.
When you think about it, a marquee works like a slider: it shows content in a line, makes it move, and repeats it. Look at any part of your website that shows a small list of key points or some testimonials - put that content in a marquee and watch it move and repeat: it catches people's attention right away.
We want to make it easy for you to do this with just a few clicks.
Finsweet Components Marquee
This Component is our answer to your marquee needs. It’s designed to let you create different kinds of marquees in no time:
- Marquees based on a single element, like a sentence, or an entire block of native Webflow content. The single element will be animated and loop seamlessly, indefinitely.
- Marquees based on a series of elements: Add any number of Items elements to your marquee, they’ll be shown from the first to the last, then loop perfectly.
- CMS based Marquees: made by default with a Webflow Collection List element. It’s so simple: link the Collection List to a Collection, and add content inside of the Item element. After setting up your Collection List, defining which and how many CMS Items you want to show, your list will be infinitely animated with a perfect loop!
Because the Finsweet Marquee is created using standard elements, it can be fully styled using Webflow, like any other Component. Transforms, IX, blending modes, you name it, there's no limit.
And because the Marquee Component connects with Webflow CMS, you can use third-party tools like Finsweet CMS Bridge to keep your marquee content fresh by automating updates at all times.
Creating a marquee
The Finsweet Components App must be installed on your Webflow project. Click on the Marketplace icon on the left sidebar, and search for Finsweet Components to install the App. All Components of the App are entirely free to use on the webflow.io staging domain, and will requires a subscription to work on a production site's custom domain. You can spend as much time as you need to test them, integrate them and fine tune your components, before starting a subscription.
After installing and launching the App, choose the Marquee Component. Review the proposed default settings. You first have to choose whether the Marquee you’re creating is dynamic (using Webflow CMS data) or static—you can’t change that choice later, so pick carefully at the start. Once created, you can preview and tweak settings like speed, direction, and optional fade-in right inside the app. You're already good to create your first marquee by clicking Create Marquee. The marquee structure of elements is then created inside of the selected element on Webflow Designer's canvas.
The next time you open the app, you’ll be able to create a marquee inside of another element, or to edit an already existing marquee if any of its elements is selected. If you want to change from creating. anew marquee or editing an existing one, just select another element on the canvas or in the Navigator view, no need to close the App.
Structure of a marquee
When creating a marquee, Finsweet’s Marquee Component uses four main building block elements: the Instance element, the List Wrapper element, the List element, and the Item element. The Instance element is the root container for your marquee. It wraps the Wrapper element, which holds the List element. The List element holds your content, added into one single Item element or divided into multiple ones. By default, it creates 9 Items, you can delete as many as you want or add more by duplicating them.
Each marquee includes specific attributes to identify and manage these elements.
- Attributes set on the Instance element:
fs-marquee-element="marquee"to identify it as a marquee, andfs-marquee-instance="[your-instance-name]"to give it a unique ID. - Attributes set on the Wrapper element:
fs-marquee-element="wrapper" - Attributes set on the List element:
fs-marquee-element="list" - Attributes set on the Item element: fs-marquee-element="item".
These attributes tell the marquee script how to position items, loop the content, and apply any speed or direction settings. Changing or removing them risks breaking the marquee functionality, so keep them intact when customizing or duplicating your design.
The only very important attribute for you is the fs-marquee-instance="[your-instance-name]" set on the Instance element, because it's useful when you want to create a new marquee based on the design of an already made one. To do so duplicate the marquee using CTRL/Cmd+D, select the Instance element of the duplicate, go to Custom Attributes in the Settings tab, and change the value of the fs-marquee-instance attribute to a new unique one. Then, while selecting the Instance element, launch the App again, change the settings of the marquee as you like, e.g., change the direction, or the speed, and apply the changes.
Styling a marquee
A Finsweet Marquee can be freely styled within wf designer, that's the magic, no limitation. You can add wf Interactions to the any element of the content, or to a wrapper of the marquee, to rotate it or animate it using wf IX triggers. You can also take advantage of the Pause on hover feature that you can set in the app, have craft revealing Interactions on the marquee Items, giving users time to browse the content at their pace.
For styling, and to avoid issues with how the Finsweet Marquee behaves, try to keep most of your custom CSS inside of a child wrapper that you place within each Item element. Avoid adding or removing elements within the Instance element structure—this ensures the marquee script can run properly. If you need to move or rotate the entire marquee, do it on the Instance element itself or better, on a parent wrapper of it, rather than modifying elements inside. That's required especially if you intend to use overflow:hidden to hide parts of the marquee.
Sometimes you’ll want to override the default height calculations—for example, if your content needs a fixed height or more spacing. Setting explicit heights or widths on the Item element (or a child wrapper within it) is an easy way to do that.
When your marquee is all set and designed, it's time to publish it to check how it animates. Note: on publish, the List element automatically switches to absolute positioning for a smooth, continuous loop. Pay attention that modifying position and dimensions of the List element itself or its immediate parent, the Wrapper, can have effects on the marquee that you won't be able to preview and fix in the Designer.
Design best practices
Balancing speed, size, and color is vital when adding a marquee. If the text moves too fast or is too large, it can overwhelm other page elements. A slow, subtle scroll might work better for a calm brand, while a bolder, faster marquee can match an energetic site. We designed the speed feature to ensure consistency regardless of the width of the marquee parent. So you can spend time to fine-tuning the speed of your marquee, performing legibility tests, and remain certain that the speed won't change depending on the marquee's position in the page. You should give an equal attention to the speed value for the tablet and phones breakpoints: what works on a laptop won't on mobile, and the marquee content size will probably change too. Make sure to adapt the speed for devices.
When deciding how much attention the marquee should draw, consider the overall layout. A marquee that’s too loud can distract from your main call-to-action or other key points. On the flip side, a marquee that’s too quiet may go unnoticed. Aim for a middle ground that draws the eye without dominating the page.
For interactive marquees, choose a slower scroll speed and add visual cues—like Pause on hover and/or hover effects on marquee items—to encourage user engagement. Since Pause on hover is designed for hover-based interactions, it naturally emphasize hover actions over clicks.
Pay close attention to the direction of your marquee, especially if it includes lengthy text. We set right-to-left as the default because it often feels more readable—even for shorter items. The same logic applies to bottom-to-top marquees, which can present stacked text in a clearer, easier-to-scan format.
Accessibility, SEO, and fallbacks
Concerns about screen readers and motion sensitivities
Moving elements can be challenging for users with visual or vestibular sensitivities. Screen readers might skip or misread rapidly changing text. Provide pauses or alternative text to help everyone access marquee content without discomfort. However, most screen readers should see a marquee content as just a list of items.
SEO considerations
Search engines can index marquee text, but too much moving content can affect readability and ranking. Keep key messages in static areas, and use the marquee for supplemental information or emphasis rather than critical site content.
Performance impact
Continuous scrolling can strain the browser if not optimized. When reaching issues, consider using lightweight animations and limiting the number of items in motion. Always test your marquee on multiple devices to ensure that the playback is smooth.
Graceful degradation
Older browsers or users with scripts disabled may not see your marquee at all. Provide a static fallback or a simplified version. This ensures essential information remains visible, even if your interactive marquee can’t run.
