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 seamless experience regardless of the number of items. This flexibility is crucial for dynamic content where item counts or item width 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, 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: Do not 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: Do not 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: Do not 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: Do not 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. Margin can lead to margin collapse where two margins from different items pressing agains each other collapse, using padding inside the item ensures the ‘gap’ will always stay uniform.
3. The great part about building with the CMS in the 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 logo, 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.

Step 6: Duplicating the Collection List Wrapper

Duplicate the collection list wrapper to create a seamless 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

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 the the collection list item if you have a fixed width on that, and do not grow or shrink on all flex children.

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. Finally, don’t forget to check out our other how-tos and cloneables.