How can I create an interaction for a scrolling text on loop on the homepage of my website in Webflow?
TL;DR
- Create a hidden-overflow wrapper with a flex row track containing duplicated text blocks to simulate continuous scrolling.
- Apply a looping page-load animation that moves the text track horizontally with linear easing for a smooth marquee effect.
To create a scrolling (marquee-style) looped text effect on your Webflow homepage, you’ll need to use a combination of interactions and layout setup with Webflow’s native tools.
1. Design the Scrolling Text Structure
- Add a Section or Container to your homepage where you want the scrolling text.
- Inside the section, add a Div Block (name it
Marquee Wrapper). - Set Overflow: Hidden to this div so scrolling text doesn't overflow visually.
- Inside the wrapper, add another Div Block (name it
Marquee Track). - Set Display: Flex, Flex Direction: Row, and Align Items: Center.
- Inside the track div, add your Text Block or multiple identical Text Blocks containing the repeating message.
Tip: Duplicate the text 2–3 times to give the illusion of continuous scrolling.
2. Apply Pixel-Based Horizontal Movement
- Select the
Marquee Trackand go to Interactions > Page Load > Timed Animation. - Create a new animation, and within it:
- Add a "Move" animation.
- Initial State: Move X =
0% - End State: Move X =
-50%(or further depending on content length) - Duration: Choose around 10–20 seconds, depending on speed desired
- Easing: Set to Linear (to keep speed consistent)
- Initial State: Move X =
- Turn on Loop this animation.
3. Ensure Seamless Looping
- The duplicated texts inside the
Marquee Trackmust be long enough so when the entire div scrolls away, the next copy continues without a visible jump. - Optionally, use a long continuous string (e.g., with spacing like “—” between) to ensure the track is wide enough.
4. Add Responsive Behavior
- Set the
Marquee Wrapperto 100% width, and ensure text inside is not cut off vertically. - For responsiveness, use
VWorREMunits for font size, and test breakpoints to confirm smooth operation across devices.
5. Finishing Touches
- Optionally, set the text to No Wrap and use white space: nowrap if needed to prevent line breaks.
- You can add hover effects to pause scrolling using interactions.
Summary
To loop scrolling text in Webflow, create a hidden-width wrapper, animate a horizontally moving track div containing duplicated text blocks, and apply a looping move interaction with linear easing. This setup creates a smooth, endless marquee effect suitable for attention-grabbing homepage content.