Autoplay Marquee: Scrolling text effect for your portfolio — tutorial
Learn how to create an infinite looping vertical marquee in Webflow to showcase dynamic text—perfect for displaying course attendees or skills for your portfolio page. We'll also cover adding a floating box overlay with autoplaying image slides. Bright and dark version is included in the free Webflow Cloneable.
I'll walk you through the process step-by-step. This is a great way to add a dynamic, modern touch to your website.
Impressively present your portfolio services with a Webflow brand
In this post, you'll learn how to create a Looping vertical marquee implemented in Webflow. This allows you to impressively present your services or other information, for example. In addition, we integrate an autoplay slider above the Marquee to make the design even more vivid.
What is a marquee?
A Marquee is an animation technique in which text or other content continuously scrolls in a specific direction — either horizontally or vertically. In the past, this feature was often used with the <marquee>tag converted to HTML (which is now obsolete), but can be used today with CSS animations or JavaScript be realized.
In Webflow, a means Marquee animation As a rule, one himself endless repetitive movement of content such as texts, logos or images. It is particularly suitable for dynamic elements such as:
- Current tickers with news or offers
- Scrolling lists of testimonials or customer names
- Endless rotating logos or services in a portfolio
Why a vertical marquee?
A continuous text or image bar offers you several advantages. With it, you can recent updates or important content Make it permanently visible without users having to scroll. In addition, such an effect is dynamic and immediately draws attention to what you want to highlight.
Step-by-Step to Marquee
- First, put a Section in Webflow and add a Wrapper Div one that contains all items.
- Include your desired content (e.g. names) as Collection List one. Be sure to sort the entries so that new entries appear first.
- Use custom CSS to make the text scroll vertically and continuously. In many cases, you must have a animation Define that of
0%toward100%runs. - Duplicate the collection list so that the entries loop infinitely without leaving a visible gap.
- Add a Overlay Div added to softly hide excessively long entries and thus maintain a clean appearance.
- Optionally place a box above the scrolling list, where you can add icons, images, or additional text. An easy way is to use a Slider to use, which alternates with different elements over and over again.
Customization of font sizes and responsive design
To prevent your font from being scaled too large or cropped on larger screens, you can container queries use. In this way, the font adapts to the width of the wrapper and remains legible.
Final tips
If you don't want to play the Marquee permanently, you can simply remove the value in the attribute field (e.g. “vertical”). This stops the animation and you get a block of static text.
Get the free template
Would you like to get started right away without having to build everything yourself? Then download this free cloneable Download from the video description and customize it to suit your taste.
