Vertical Word Slide Animation - CSS only

Step 1: Understanding the HTML Structure

First, let's break down the HTML:

<div class="container">
  <h1 class="rotating-text">
    An online experience<br />
    platform that <span class="nowrap">builds
      <span class="window">
        <div class="window-inner">
          <span>trust.<br /></span>
          <span>loyalty.<br /></span>
          <span>respect.<br /></span>
          <span>value.<br /></span>
          <span>referrals.<br /></span>
          <span>trust.<br /></span>
        </div>
      </span>
    </span>
  </h1>
</div>

The text outside the span.window is static, and inside that window, we’ve got our rotating words. Each word is wrapped in a span, and they're all contained within the div.window-inner.

This structure sets up our animation where the words will scroll vertically inside the window. Only one word will be visible at a time, thanks to the magic of CSS.

Step 2: Styling the Text

Now, let’s jump into the CSS:

:root {
  --font-size: 3rem;
  --line-height: 1.2;
  --num-words: 6; /* Be sure to include the extra word at the end in this count */
  --animation-duration: 8s;
}

.rotating-text {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

‍‍Here, we’ve defined a few variables using :root. These variables give us the ability to easily adjust the font size, line height, and animation duration across the whole component.

• --font-size sets the size of the rotating words.
• --line-height is the vertical spacing between the lines of text.
• --num-words helps calculate the animation steps (more on that soon).
• --animation-duration sets how long it takes for the entire sequence of words to rotate.

The .rotating-text class just applies these values to our headline.

Step 3: The Rotating Window

Next, we’ll set up the “window” that displays one word at a time:‍‍

.window {
  display: inline-block;
  outline: 1px dashed var(--blue);
  border-radius: 0.5rem;
  overflow: hidden;
  flex-grow: 1; /* Allows .window to grow and take up remaining space */
  height: calc(var(--font-size) * var(--line-height));
  vertical-align: bottom;
}

Here, the .window is responsible for clipping the content and showing only one word at a time. The key parts here are overflow: hidden (which ensures only the part of the text inside the window is visible) and setting the height to match one line of text. I've added an outline to help you visualize the container for all of our words.

Step 4: Animating the Text Inside the Window

Now, for the fun part—the animation. We’ll animate the .window-inner element so that it moves vertically, revealing each word one by one:

.window-inner {
  display: inline-block;
  animation: scroll-text var(--animation-duration) ease-in-out infinite;
  color: var(--blue);
}
.window span {
  display: block;
}

Each word is stacked vertically using display: block, and we apply the scroll-text animation to .window-inner.

Here’s what the animation looks like:

@keyframes scroll-text {
  0% {
    transform: translateY(0%); /* trust */
  }
  16.66% {
    transform: translateY(calc(-16.66%)); /* loyalty */
  }
  33.33% {
    transform: translateY(calc(-33.33%)); /* respect */
  }
  50% {
    transform: translateY(calc(-50%)); /* value */
  }
  66.66% {
    transform: translateY(calc(-66.66%)); /* referrals */
  }
  83.33% {
    transform: translateY(calc(-83.33%)); /* trust (at the end) */
  }
  100% {
    transform: translateY(calc(-83.33%)); /* trust (at the end) */
  }
}

We use percentages to control when each word should be shown. Since we have six words, we divide 100% by 6, making each step approximately 16.66%. The translateY() function moves the text up by one word at a time. The animation then loops infinitely.

Step 5: Fine-Tuning

At this point, the animation should be working, but let’s walk through a few things you might want to tweak:

• Speed: You can adjust the speed by changing the --animation-duration variable. Want the words to rotate faster? Decrease this number. Want a slower rotation? Increase it.
• Number of Words: If you add or remove words, make sure to update --num-words and adjust the percentage steps in the keyframes to match.
• Styling: Feel free to customize the font, size, colors, and more to match your design. You can even remove the dashed orange outline once you’re happy with how it looks.

Final Thoughts

With just a few lines of CSS, you can create an engaging animation that adds personality to your headline. Plus, this technique can be adapted for various use cases—testimonial sliders, feature highlights, you name it. Hopefully, this step-by-step guide made it easy to understand how it works, so go ahead and give it a try on your next project!