Rotating Text Animation for Websites: A Stable, Accessible Headline

A rotating text animation swaps a word or short phrase inside a headline. On a landing page, the useful version explains several applications of the same offer without moving the rest of the layout. The term can also mean spinning letters or text on a circular path; this guide covers the changing-word hero pattern.

Copy a stable rotating headline

The first word is in the HTML, so the heading is visible before JavaScript runs. A fixed-height window reserves space for the longest word. The controller changes the word every three seconds and stays still for reduced-motion visitors.

<h1>Make your next <span class="word-window" aria-hidden="true">
  <span id="rotating-word">launch</span></span>
  <span class="sr-only">launch, campaign, or story</span></h1>
<style>
.word-window { display: inline-grid; min-width: 9ch; height: 1.2em;
  overflow: hidden; vertical-align: bottom; }
.word-window span { display: block; transition: opacity .22s, transform .22s; }
.word-window span.out { opacity: 0; transform: translateY(-.6em); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .word-window span { transition: none; }
}
</style>
<script>
const words = ['launch', 'campaign', 'story'];
const word = document.querySelector('#rotating-word');
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
let index = 0;
if (word && !reduced) {
  setInterval(() => {
    if (document.hidden) return;
    word.classList.add('out');
    setTimeout(() => {
      index = (index + 1) % words.length;
      word.textContent = words[index];
      word.classList.remove('out');
    }, 220);
  }, 3000);
}
</script>

Use words that complete the same sentence grammatically. If the replacements need different articles, tenses or line breaks, rotate a complete phrase instead. Adjust the reserved width to the longest phrase. At phone width, verify that no replacement wraps into a second line and shifts the entire hero.

Keep meaning available without the animation

The moving text is hidden from assistive technology; the visually hidden span supplies the complete idea once. Do not add aria-live to a headline that changes every few seconds, because repeated announcements can interrupt reading. Put the primary offer and call to action in ordinary HTML that never disappears. A search crawler should not have to wait for a timer to understand the page.

Two or three choices are usually enough. Ten rotating words can make a headline feel like a component demo rather than a deliberate message. Compare the animated hero patterns before layering another entrance animation on top.

When CSS alone is enough

For permanently fixed words and timing, staggered CSS keyframes on separate spans are possible. A tiny JavaScript controller is easier when a CMS changes the word list or the sequence should pause while the tab is hidden. This one effect does not require a large animation package.

Related guidance: website animations, MDN reduced motion and MDN document visibility.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.