Overview
Animated Text Styles is a flexible heading module for HubSpot pages. It lets content editors add visual emphasis or changing text without writing HTML, CSS, or JavaScript.
The module includes six layouts and only displays settings relevant to the selected layout, keeping the editor simple.
Add the module to a page
- Install Animated Text Styles from the HubSpot Marketplace.
- Open a HubSpot website or landing page in the page editor.
- In the left sidebar, search for Animated Text Styles.
- Drag the module into the desired page section.
- Choose a heading layout, enter the heading, and configure its style.
- Preview the page on desktop and mobile, then publish your changes.
Tip: Keep animated headings short. A concise message is easier to read and produces smoother transitions on smaller screens.
Choose a heading layout
Normal heading
Displays a standard static heading using the selected typography and alignment.
Fancy underline
Underlines selected words or phrases using hand-drawn, wavy, double, brush, or straight styles.
Fancy circle
Draws an oval around selected words or phrases using hand-drawn, double, clean, or loose styles.
Gradient word
Applies a customizable color gradient to one or more selected words.
Typewriter text
Types and deletes a list of replacement words or phrases at a chosen position in the heading.
Rotating text
Cycles through replacement words or phrases using fade, slide, flip, blur, or clip transitions.
Select the words to style
Words are counted from left to right, beginning with 1. Use this numbering in the underline, circle, and gradient position fields.
| Entry | Result | Example |
|---|
2 | Styles one word | Styles the second word |
1,3,5 | Styles separate words | Styles the first, third, and fifth words |
2-4 | Styles one complete phrase | Applies one effect across words two through four |
Example: In “Build better digital experiences,” the word digital is position 3.
For typewriter and rotating layouts, use Animated word position to choose the word that will be replaced. Add one replacement word or phrase per line in Animated words.
Content settings
Heading text
Enter the complete heading that visitors should see. For animated layouts, one word in this heading acts as the replacement position.
Accessible heading text
Enter the complete, stable meaning for screen readers and search engines. If left blank, the module uses the main heading text.
Semantic heading tag
Select the actual HTML heading level from H1 to H6. Choose the level according to the page’s content hierarchy.
Visual heading class
Optionally apply your theme’s H1–H6 visual class without changing the semantic HTML tag. For example, an H2 can visually match your theme’s H1 style while remaining an H2 in the document structure.
Style settings
| Group | Available controls |
|---|
| Text | Font family, weight, size, base color, animated text color, line height, and letter spacing |
| Fancy underline | Underline style, color, thickness, offset, and drawing animation |
| Fancy circle | Circle style, color, thickness, surrounding space, and drawing animation |
| Gradient word | Gradient colors and direction |
| Spacing | Module padding and margin controls |
| Alignment | Left, center, or right heading alignment |
| Advanced | Responsive word-wrapping control |
The module inherits supported typography and color values from the active HubSpot theme by default. You can override them for an individual module instance.
Animation settings
Rotating text
Choose from Fade, Slide Up, Slide Down, Flip, Blur, and Clip Reveal. You can also control the rotation interval and transition duration.
Typewriter text
Control typing speed, deleting speed, pause duration, cursor visibility, and the cursor character.
Shared controls
Enable or disable the animation, add a start delay, pause the effect while it is outside the viewport, and optionally pause it when a visitor hovers over the heading.
Recommended: Leave “Pause animation outside the viewport” enabled. It avoids unnecessary background animation when visitors cannot see the module.
SEO and accessibility guidance
- Use only one H1 on a typical page unless your content structure genuinely requires otherwise.
- Follow a logical heading hierarchy: H1, followed by H2 sections and H3 subsections.
- Use the accessible heading field to provide a stable, complete message when animated words change the visible text.
- Choose colors with sufficient contrast against the page background.
- Avoid overly fast animation speeds that may make the heading difficult to read.
The module exposes a stable heading to assistive technology while marking the animated visual treatment as decorative, preventing changing words from being repeatedly announced.
Advanced settings
Additional CSS class
Add one or more class names without periods, such as homepage-heading featured-title. This is useful for custom theme styling.
Custom element ID
Add a unique identifier using letters, numbers, hyphens, or underscores. The module automatically adds a safe prefix.
Responsive word wrapping
Keep this enabled for most pages so longer headings and animated phrases can wrap naturally on smaller screens.
Troubleshooting
The wrong word is styled or animated
Recount every word from left to right starting at 1. Punctuation attached to a word does not create an additional word position.
The animation is not playing
Confirm that text animation is enabled and that at least two entries have been added to the Animated Words field, one per line. Also check whether your browser or operating system is requesting reduced motion.
The heading wraps unexpectedly
Shorten the heading, reduce the font size, or keep responsive wrapping enabled. Long replacement phrases may require more horizontal space than the original word.
The heading does not match the theme
Reset the typography controls to inherited values, or select the appropriate visual heading class. Custom theme CSS may override module styling.
The underline or circle looks too close to the text
Adjust underline offset or circle spacing in the Style tab. You can also reduce the effect thickness.
The gradient is not visible
Confirm that the Gradient Word layout is selected and that the entered word positions exist in the heading.
Free-module support
Animated Text Styles is provided as a free Marketplace module. It includes the features and editor controls described in this documentation.
Support covers reproducible issues with the module’s built-in functionality. Custom development, theme-specific CSS conflicts, bespoke animation changes, page design work, and third-party integrations are not included with the free module.
Before reporting an issue, please test the module on a clean page, confirm the selected settings, and include the page URL, screenshots, browser details, and steps needed to reproduce the problem.