Skip to main content

Animated Text

Use Animated Text for headlines where one phrase changes while the surrounding sentence stays fixed, such as rotating benefits, outcomes, audiences, or offer angles.

How It Works In Atomicat​

The drawer stores a prefix, a list of animated strings, and a suffix. Each string can be reordered, cloned, removed, or edited. Animation settings include effects such as typing, fade, fade up/down/left/right, zoom, bounce, and swing. The animation can start on page load or when the element enters the viewport. Typing mode also exposes type speed, back speed, back delay, cursor display, cursor character, start delay, and loop.

When To Use It​

  • Rotate several value propositions inside one hero headline.
  • Show multiple audience segments without duplicating the whole heading.
  • Add motion to a short section title where a static heading feels too flat.
  • Test ad-message variants while keeping the page structure stable.

Configure The Element​

  • Write a stable prefix and suffix first, then add only the words or phrases that should rotate.
  • Keep animated strings similar in length so the headline does not jump dramatically.
  • Choose an HTML tag that fits the page structure; animated text can still be a heading tag when appropriate.
  • Use viewport start for lower-page sections so the animation begins when the visitor sees it.
  • Adjust typing speed, back speed, and delay only after the wording is final.

Testing Notes​

  • Preview on mobile and check that the longest string does not overflow.
  • Review motion intensity on slower devices; bounce and swing are more noticeable than fade.
  • If the element has a click event, test the click area after the animation starts.

Limitations And Tips​

  • Animated Text should not carry legal terms or critical instructions that disappear too quickly.
  • Avoid long rotating sentences; use short phrases so visitors can read them before the next transition.
  • Excessive motion above the fold can distract from the CTA.

FAQ​

Which animation is best for a headline?

Typing is best when the changing word is the focus; fade or fade up is usually calmer for performance pages.

Can Animated Text start only when visible?

Yes. The drawer supports page-load and viewport start modes.

Why does my heading width jump?

The rotating strings likely have very different lengths. Shorten them or give the surrounding container enough width.