How to build a native Webflow CMS-powered marquee / ticker tape

How to build a native Webflow CMS-powered scroller / ticker tape

At the end of the post you’ll also find the cloneable of the project I created in the video. I’m going to start off with an excuse for the video: Milk Moon Studio is just a small Webflow studio, which means I build a lot of these for clients, which means I’m probably not great at explaining this, since it’s second nature by now.

So… a ticker tape, scroller or marquee, often seen on news websites or stock market platforms, is a continuously scrolling list of items moving horizontally across the screen. In Webflow this can be text, images, anything you can stick in the CMS and want to move from one side to the other in perpetuity. Our goal in this post and video is to create a responsive, CMS-powered ticker that adjusts based on the content, ensuring a smooth experience regardless of the number of items. This flexibility is important for dynamic content where item counts or item widths can vary.

Step-by-step guide

Step 1: Setting up the structure

First, let's outline the structure.

1. Section: This will contain everything.
2. Scroll Wrapper: This will handle the overflow and ensure only the visible part of the ticker is shown. Very important to wrap everything nicely and avoid the page overflowing the browser viewport.
3. Scroll Track: The track along which the items will scroll.
4. Collection List Wrapper: We'll duplicate this to create a continuous loop, basically so we won’t see the end of the collection list items with white space behind them as we move them across the screen.
5. Collection List: This is where our dynamic CMS items live.
6. Collection List Items: Individual items in the ticker.

We'll start by creating the necessary containers and then set up the interaction.

Step 2: Creating the Section and Scroll Wrapper

1. Add a Section: This will be our main container.

   We’re going to start off assuming that we want to make a full-width ticker, though this does not have to be the case and the cloneable has both. We’ll make the section 100vw.

2. Add the Scroll Wrapper inside the section:

   Make it flex, horizontal and left aligned (we’re moving the ticker from right to left across the screen) and handle overflow, so overflow: hidden, and width 100%.

Step 3: Adding the Scroll Track and Collection List Wrapper

1. Add the Scroll Track inside the scroll wrapper:

   Set Flex Child Sizing to: Don’t shrink or grow.
   Make it Flex, Horizontal, Left Aligned.
   Make the width Auto.

2. Add the Collection List Wrapper inside the scroll track:

   Do the same again:

   Set Flex Child Sizing to: Don’t shrink or grow.
   Make it Flex, Horizontal, Left Aligned.
   Make the width Auto.

Step 4: Set up the Collection List

1. Same thing here:
   Set Flex Child Sizing to: Don’t shrink or grow.
   Make it Flex, Horizontal, Left Aligned.
   Make the width Auto.

This all might seem a bit redundant, but it works so go with it.
You’ve now ensured the ticker tape / scroller is set up and ready to travel from right to left. 

Step 5: Styling the Collection List Items

1. Set Flex Child Sizing to: Don’t shrink or grow.
2. Style them as per your needs, but ensure that any styling as to the width, height or padding happens in or on them, not outside. We don’t, for example, want you to set the gap between items by adding margin, rather add padding inside the item. Margins on the items are easy to lose track of once the list is duplicated and looping, whereas using padding inside the item ensures the ‘gap’ will always stay uniform. (Flex items don’t collapse margins the way block elements do, so the padding is about keeping things predictable, not avoiding margin collapse.)
3. The great part about building with the CMS in this way is that you can style the item, e.g. give it a fixed width and you’ll have a list of nice uniform items all the same size, scrolling across the screen, or you could have the content from the CMS used inside the item determine the width. A list of logos, all with different widths, each in their own item, would create a nice list of scrolling logos, but items do not have to have the same width in this example like they did in the previous one. We show both in the cloneable, but this makes it flexible, simple and means it works for text, images, stock prices, whatever. Fixed or dynamic widths on items.

If you want to go further with what goes inside those items, our posts on creating text spans in dynamic CMS text elements and a flexbox CMS pattern that feels custom are worth a look.

Step 6: Duplicating the Collection List Wrapper

Duplicate the collection list wrapper to create a continuous loop. Our interaction will move the Collection List Wrapper class 100% left, and if we don’t have two collection lists moving left, we’ll see whitespace after the entire list of items moves left.

Step 7: Adding the interaction

NB! These steps use Webflow’s Classic interactions, which is what we used when we built this. Interactions with GSAP is the default on new sites now, so if the Interactions panel looks different, use the dropdown at the bottom of the panel to switch to Classic.

1. Go to Interactions: In Webflow, create a new page load interaction, we’re using that as this is right at the top of our project, but you can trigger on scroll as well.
2. Move the Collection List Wrapper class:
   • Move to -100% over 60 seconds.
   • Set easing to linear.
   • Reset to 0% instantly after completing the move, no delay or duration.
   • After you’ve saved, make sure Loop is ticked.

This will create the infinite scrolling effect.

Final touches

• Test and Adjust: Preview your project to ensure everything scrolls smoothly. Adjust the timing if necessary.
• Responsiveness: Make sure the ticker is responsive by testing it on various screen sizes.

You've built a dynamic, CMS-powered ticker tape scroller in Webflow. This feature can be used to display news headlines, stock prices, logos, or any other information you want to scroll across your website. The key is understanding the structure and interactions to ensure smooth and responsive scrolling. Auto width on everything inside the outer wrapper, aside from the collection list item if you have a fixed width on that, and do not grow or shrink on all flex children.

Frequently asked questions

How do I make a ticker tape or marquee in Webflow? Build a scroll wrapper with overflow hidden, put a scroll track inside it, then two identical Collection List Wrappers side by side, and use a looping page load interaction that moves the wrapper class from 0% to -100% with linear easing. The steps above cover every setting.

Can a Webflow ticker be powered by the CMS? Yes. Because the items come from a Collection List, you add or remove items in the CMS and the ticker adjusts, whether they are text, logos or stock prices, with fixed or dynamic widths.

Why do I need to duplicate the Collection List Wrapper? The interaction moves the Collection List Wrapper class 100% to the left, so without a second copy right behind it you would see white space until the loop resets. The duplicate fills that gap so the ticker looks endless.

You can grab the cloneable here, and drop your questions in the comments if you still have them after checking out the project and video. I’ll also leave a link to the original ticker cloneable I talk about in the video that prompted me to build this one. It’s also a good example. Looking for another CMS trick? Try seamless pagination. Finally, don’t forget to check out our other how-tos and cloneables.