Web Development: Create a Rotating Text Animation Effect With CSS Variables and JavaScript

Create a Rotating Text Animation Effect With CSS Variables and JavaScript

In this new tutorial, we’ll learn how to create a rotating text animation effect using CSS variables and JavaScript. Although we can certainly build a simple text-changing animation in pure CSS, we’ll put in the loop JavaScript to make things more maintainable and effective.

Our Text Animation

Here’s what we’re going to create. It’s a great addition to portfolio websites or hero sections to highlight things.

We’ll start from a basic text animation and finish with the target effect.

Basic Text Rotating Animation

We’ll define a h1 element where we’ll put as spans all the words that we want to animate. By default, all spans will have the data-bg-color and data-color custom attributes that will determine their text and background colors accordingly. Plus, initially, only the span with the current class will be visible—the first one in our case.

Here’s the required markup format:

<h1 class="words-wrapper">
  I want to learn <span class="css">CSS</span> and
  <span class="words">
    <span class="current" data-bg-color="#ffc703" data-color="#000">React</span>
    <span data-bg-color="#004e98" data-color="#fff">TypeScript</span>
    <span data-bg-color="#8cb369" data-color="#000">Python</span>
    <span data-bg-color="#104911" data-color="#fff">PrestaShop</span>
    <span data-bg-color="#b8c0ff" data-color="#000">Ruby</span>
    <span data-bg-color="#e71d36" data-color="#fff">Angular</span>
    <span data-bg-color="#e2c044" data-color="#000">WordPress</span>
    <span data-bg-color="#065a82" data-color="#fff">Node</span>
  </span>.
</h1>

As we’ve done in many other tutorials in the past, we’ll use CSS Grid to place all words on top of each other. But remember that each time, only the word with the current class will appear.

Here are all the required styles:

.words-wrapper {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.words-wrapper .css {
  color: #2ec4b6;
}

.words-wrapper .words {
  display: inline-grid;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--color, #000);
  background: var(--color-bg, #ffc703);
}

.words-wrapper .words span {
  grid-area: 1/1;
  display: none;
}

.words-wrapper .words span.current {
  display: block;
}

To show a different word after a certain amount of time, we’ll follow this approach:

Every 1.5 seconds, we’ll target the visible (active) word.
Then, we’ll find its adjacent sibling word if it exists, otherwise, we’ll get the first word.
We’ll remove the current class from the active word and add it to the new element.
Finally, we’ll grab the colors of the new active word and update the corresponding CSS variables.

Here’s the required JavaScript:

const wrapper = document.querySelector(".words");
const CURRENT_CLASS = "current";

setInterval(() => {
  const currentWord = wrapper.querySelector("span.current");
  const nextWord = currentWord.nextElementSibling
    ? currentWord.nextElementSibling
    : wrapper.firstElementChild;
  currentWord.classList.remove(CURRENT_CLASS);
  nextWord.classList.add(CURRENT_CLASS);
  wrapper.style.setProperty("--color", nextWord.dataset.color);
  wrapper.style.setProperty("--color-bg", nextWord.dataset.bgColor);
}, 1500);

We'll end up with the following demo:

Complex Text Rotating Animation

Let’s now build on the previous example and create something more elegant!

The markup will remain the same apart from one change; this time, we’ll add the next class to the word that comes after the active one, like this:

<h1 class="words-wrapper">
  I want to learn <span class="css">CSS</span> and
  <span class="words">
    <span class="current" data-bg-color="#ffc703" data-color="#000">React</span>
    <span class="next" data-bg-color="#004e98" data-color="#fff">TypeScript</span>
    <span data-bg-color="#8cb369" data-color="#000">Python</span>
    <span data-bg-color="#104911" data-color="#fff">PrestaShop</span>
    <span data-bg-color="#b8c0ff" data-color="#000">Ruby</span>
    <span data-bg-color="#e71d36" data-color="#fff">Angular</span>
    <span data-bg-color="#e2c044" data-color="#000">WordPress</span>
    <span data-bg-color="#065a82" data-color="#fff">Node</span>
  </span>.
</h1>

Unlike the previous example, we won’t use CSS Grid to position the words, but instead, each word will be an absolute positioned element. Their immediate parent (i.e. the .words element) will have a width that will depend on the width of the active word. The next word will appear smoothly from bottom to top and then move to the top to disappear.

How each word is placed in the container

On small screens where the text splits into more than one line, to avoid line flickering that may occur depending on the active word’s width, we'll set all words’ widths equal to the width of the largest word. In this case, we’ll use the !important keyword to override the width of the .words element that's set via the width CSS variable.

Here are all the required styles:

.words-wrapper {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.words-wrapper .css {
  color: #2ec4b6;
}

.words-wrapper .words {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  width: var(--width);
  height: 60px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--color, #000);
  background: var(--color-bg, #ffc703);
  box-sizing: content-box;
  transition: all 0.7s;
}

.words-wrapper .words span {
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: transform 0.7s, opacity 0.25s 0.25s;
}

.words-wrapper .words span.current {
  opacity: 1;
  transform: translate(-50%, 0);
}

.words-wrapper .words span.next {
  transform: translate(-50%, 100%);
}

@media (max-width: 700px) {
  .words-wrapper .words {
    width: var(--width-mobile) !important;
  }
}

When the DOM is ready, we’ll specify the initial width of the .words wrapper by updating the values of the width and width-mobile CSS variable values.

Next, similar to the previous example, to show a different word after a certain amount of time, we’ll follow this approach:

Every 1.5 seconds, we’ll target the visible (active) and next active words.
Then, we’ll find the adjacent sibling word of the next active word if it exists, otherwise, we’ll get the first word.
We’ll remove the current class from the active word and the next class from the next active word.
We’ll add the current class to the next active word and the next class to its adjacent sibling word.
Finally, we’ll grab the width and colors of the new active word and update the corresponding CSS variables.

Here’s the required JavaScript:

const wrapper = document.querySelector(".words");
const words = wrapper.querySelectorAll("span");
const currentWord = wrapper.querySelector("span.current");
const wordsWidths = Array.from(words).map((word) => word.offsetWidth);
const maxWordsWidth = Math.max(...wordsWidths);
const CURRENT_CLASS = "current";
const NEXT_CLASS = "next";

wrapper.style.setProperty("--width", `${currentWord.offsetWidth}px`);
wrapper.style.setProperty("--width-mobile", `${maxWordsWidth}px`);

setInterval(() => {
  const currentWord = wrapper.querySelector("span.current");
  const nextWord = wrapper.querySelector("span.next");
  const nextNextWord = nextWord.nextElementSibling
    ? nextWord.nextElementSibling
    : wrapper.firstElementChild;
  currentWord.classList.remove(CURRENT_CLASS);
  nextWord.classList.remove(NEXT_CLASS);
  nextWord.classList.add(CURRENT_CLASS);
  nextNextWord.classList.add(NEXT_CLASS);
  wrapper.style.setProperty("--color", nextWord.dataset.color);
  wrapper.style.setProperty("--color-bg", nextWord.dataset.bgColor);
  wrapper.style.setProperty("--width", `${nextWord.offsetWidth}px`);
}, 1500);

I recommend you use the browser console to inspect the words and see how they behave.

We'll end up with the following demo:

Here’s what we’re going to create. It’s a great addition to portfolio websites or hero sections to highlight things.

Conclusion

In this tutorial, we used CSS variables and JavaScript to build a text animation effect where certain words change after a specific period. This will hopefully inspire you to create even more exciting things by changing perhaps more than one word simultaneously, etc.

As always, thanks a lot for reading!

Discover More JavaScript-Based Text Effects

Interested in more creative text animation effects with JavaScript? If so, check out these tutorials:

Web Development

Thursday, February 15, 2024