Hubspot CSS Scrolling Text Guide

The Hubspot article on scrolling text in CSS is a great example of how to replace the old <marquee> tag with modern, accessible animations using keyframes. This guide walks you through the same concepts step-by-step so you can create smooth, performant, and responsive scrolling text for your own site.

Why Use CSS Scrolling Text Instead of Marquee in Hubspot-style Layouts

The deprecated <marquee> tag is no longer recommended. Modern CSS gives you more control and better accessibility, which is exactly what the Hubspot example demonstrates.

Key advantages of using CSS animations:

Full control over speed, direction, and easing
Responsive behavior with flexbox or grid layouts
Better compatibility with screen readers and accessibility tools
Cleaner separation of content (HTML) and presentation (CSS)

By following a structure similar to the Hubspot tutorial, you can build reusable scrolling text components for announcements, tickers, and promotional banners.

Core HTML Structure for Hubspot-Inspired Scrolling Text

The basic idea is to wrap your scrolling content in a container that hides overflow, then animate an inner wrapper across the screen.

Step 1: Create the HTML Container

Start with a simple HTML structure that could easily be dropped into a Hubspot template or any modern CMS:

<div class="scroll-container">
  <div class="scroll-text">
    Your scrolling text goes here. Add links, <strong>highlights</strong>, or icons.
  </div>
</div>

Key points:

.scroll-container defines the visible region.
.scroll-text is the element that will actually move.
You can reuse this pattern in multiple sections, just as the Hubspot example reuses consistent layout blocks.

Step 2: Add Basic Container Styling

Give the container clear dimensions and hide anything that scrolls outside its boundary:

.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: #f5f5f5;
  padding: 1rem 0;
}

This creates a horizontal strip, similar to a notification bar you might see in a Hubspot landing page.

Hubspot-Inspired CSS Animation for Scrolling Text

Next, animate the inner text using CSS keyframes. The Hubspot article demonstrates a left-to-right motion that repeats infinitely.

Step 3: Define the Keyframes

Use @keyframes to move the text from right to left across the viewport:

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

This creates a continuous motion from outside the right edge to beyond the left edge.

Step 4: Apply the Animation to the Text

Now, style .scroll-text so it uses the keyframes and remains readable:

.scroll-text {
  display: inline-block;
  padding-left: 100%;
  font-size: 1rem;
  animation: scroll-left 15s linear infinite;
}

Important details drawn from the Hubspot-style approach:

display: inline-block; keeps the text on one line.
padding-left: 100%; ensures the text starts off-screen to the right.
animation: ... infinite; makes the scroll loop continuously.

Making Hubspot-Like Scrolling Text Responsive and Flexible

To match the adaptability you see in Hubspot designs, make sure your scrolling text looks good on different screen sizes.

Step 5: Adjust Speed and Readability

Match animation speed to the length of your content, just as any well-crafted Hubspot module would:

Short text: slower duration (e.g., 20–25s)
Long text: moderate duration (e.g., 15–18s)
Very long text: either make the font smaller or break it into multiple lines or items

You can tweak the timing like this:

.scroll-text {
  animation: scroll-left 20s linear infinite;
}

Test on mobile and desktop so the text never feels too fast to read.

Step 6: Use Multiple Items for a Hubspot-Style Ticker

The Hubspot example focuses on a single continuous line, but you can adapt it into a multi-item ticker by using list elements:

<div class="scroll-container">
  <div class="scroll-text">
    <span>Item One</span>
    <span>•</span>
    <span>Item Two</span>
    <span>•</span>
    <span>Item Three</span>
  </div>
</div>

Then add spacing:

.scroll-text span {
  margin: 0 1.5rem;
}

This technique mirrors the polished, modular design strategy you often see in Hubspot page components.

Accessibility Tips for Hubspot-Level Quality

Well-built scrolling text should respect motion sensitivity and screen reader needs, just like a carefully audited Hubspot layout.

Step 7: Respect Reduced Motion Preferences

Use the prefers-reduced-motion media query to stop or slow animations for users who request it:

@media (prefers-reduced-motion: reduce) {
  .scroll-text {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

This effectively disables the continuous scroll, improving accessibility.

Step 8: Provide Static Alternatives

Consider adding a static version of the message above or below the ticker for critical announcements. This follows the same user-first approach that the Hubspot article promotes by moving away from deprecated markup.

Repeat important headlines in regular text blocks.
Ensure contrast and font size meet accessibility guidelines.
Avoid using scrolling text for essential instructions that users must not miss.

Integrating Hubspot-Inspired Scrolling Text Into Your Site

You can incorporate this pattern into almost any platform while following the same principles highlighted in the Hubspot guide.

Step 9: Add to a CMS or Builder

Steps to integrate:

Open your theme or template editor.
Insert the HTML container and text into the desired section.
Add the CSS to your main stylesheet, theme customizer, or a custom code block.
Save, publish, and test in multiple browsers.

If you are using a visual builder or marketing platform, the process is similar to embedding custom modules the way Hubspot demonstrates in its developer documentation.

Step 10: Optimize Performance and SEO

To keep performance strong:

Limit the number of simultaneous animations on one page.
Avoid very large text strings that may impact layout shifts.
Test on lower-powered devices to ensure smooth scrolling.

From an SEO standpoint, the text inside the scrolling area is still indexable, just as it would be in any Hubspot content block. Use natural language, descriptive phrases, and semantic HTML around the ticker to support your overall page topic.

Further Learning from the Original Hubspot Example

To see the original demonstration of this technique, review the Hubspot tutorial on CSS scrolling text here: Hubspot CSS scrolling text article. Compare your implementation with the source to understand variations in timing, layout, and styling.

If you need broader help with implementation, performance optimization, or SEO strategy around interactive UI patterns, you can also consult specialists at Consultevo for tailored guidance.

By following these steps, you can reproduce the scrolling text effect described in the Hubspot article using modern CSS, while maintaining accessibility, performance, and clean structure suitable for any professional website.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`