×

Hupspot CSS Typing Animation Guide

/ CRM, Hubspot / By

Hupspot CSS Typing Animation Guide

If you want to recreate the smooth CSS typing effect you see on many modern sites like Hubspot, this step-by-step guide will walk you through creating a clean typing animation, a blinking cursor, and an optional looping effect using pure CSS and minimal HTML.

Why Use a Hubspot-Style Typing Animation?

A typing animation draws attention to headline copy and key messages. By mimicking a Hubspot-style effect, you can:

  • Highlight product value propositions in a dynamic way.
  • Make hero sections more interactive without JavaScript.
  • Keep load times fast with lightweight CSS animations.

This approach uses only HTML and CSS, making it easy to integrate into most website builders and CMS platforms.

Core Structure for a Hubspot Typing Effect

Begin with simple, semantic HTML to hold the text that will appear as if it is typed out.

<div class="typing-container">
  <p class="typing-text">We help you grow your business.</p>
</div>

This wrapper and paragraph will be styled with CSS to create the typewriter illusion.

Hubspot-Inspired CSS Typing Animation

The key to a realistic typing animation is controlling the width of the text element over time using the steps() timing function.

.typing-container {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.typing-text {
  display: inline-block;
  border-right: 2px solid #000;
  font-family: monospace;
  font-size: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 4s steps(30, end) forwards;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

Important details:

  • overflow: hidden; hides characters that are not yet “typed”.
  • white-space: nowrap; prevents the text from wrapping to the next line.
  • steps(30, end) controls how many character jumps appear, giving a typewriter feel.

Adding a Hubspot-Style Blinking Cursor

Many Hubspot-style headers include a blinking cursor at the end of the text. You can achieve this by animating the right border.

.typing-text {
  border-right: 2px solid #000;
  animation: typing 4s steps(30, end) forwards, cursor 0.7s step-end infinite;
}

@keyframes cursor {
  from { border-right-color: #000; }
  to { border-right-color: transparent; }
}

Here, the cursor animation simply toggles the border color on and off, creating the blinking caret effect.

Looping Hubspot Typing Animation for Multiple Phrases

If you want to display several rotating phrases, similar to advanced Hubspot hero sections, you can loop the animation by alternating between typing and erasing.

Hubspot Loop Concept: Type and Erase

One approach is to animate the width forward and backward to simulate typing and deleting:

.typing-text {
  border-right: 2px solid #000;
  animation: 
    typing-loop 6s steps(30, end) infinite,
    cursor 0.7s step-end infinite;
}

@keyframes typing-loop {
  0% { width: 0; }
  40% { width: 100%; }
  60% { width: 100%; }
  100% { width: 0; }
}

This pattern lets the text type in, pause, then erase. You can sync this with JavaScript or additional CSS to swap phrases between loops if needed.

Alternative Hubspot-Style Multi-Line Setup

To show a static intro followed by animated endings, structure the HTML like this:

<p class="typing-wrapper">
  We help you
  <span class="typing-text">grow.</span>
</p>

The fixed part of the line (“We help you”) remains constant, while the span receives the typing animation, allowing you to cycle through words like “grow,” “scale,” or “succeed.”

Responsive Tips for a Hubspot-Like Experience

To keep the animation usable on mobile and different screen sizes, follow these guidelines:

  • Use relative font sizes (like rem) for smoother scaling.
  • Avoid extremely long sentences that might overflow narrow viewports.
  • Test your animation speed on both desktop and mobile devices.

You can also adjust the steps count to match the exact number of characters in your text for the most natural effect.

Accessibility Considerations for Hubspot CSS Animations

To ensure your typing effect is accessible:

  • Maintain sufficient color contrast between text and background.
  • Avoid excessively fast blinking, which can distract some users.
  • Consider respecting “prefers-reduced-motion” for visitors who disable animations.
@media (prefers-reduced-motion: reduce) {
  .typing-text {
    animation: none;
    border-right: none;
  }
}

This media query disables the animation for users who prefer minimal motion, improving the overall experience.

Hubspot Typing Animation Implementation Checklist

Use this quick checklist when integrating the effect into your site:

  1. Create a container and text element in HTML.
  2. Apply overflow control and white-space: nowrap;.
  3. Add the @keyframes typing animation.
  4. Layer in the blinking cursor animation.
  5. Optionally configure a looping animation for multiple phrases.
  6. Test on desktop, tablet, and mobile devices.
  7. Verify accessibility and performance.

Useful Resources and Further Reading

To dive deeper into the original inspiration and more advanced variations, review the source article that explains a similar typing effect in detail on the Hubspot blog: CSS typing animation tutorial.

If you are also working on broader website strategy, SEO, or conversion optimization to complement your new animation, you can find expert consulting support at Consultevo.

By combining this Hubspot-inspired CSS typing animation with strong messaging and a clear call to action, you can create engaging hero sections that capture attention and keep visitors focused on your most important value propositions.

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

“`

Verified by MonsterInsights