Animejs is a powerful animation library that can be used to create complex animations. In this post, I will show you how to use it to create a rotating and fading text effect. As long as you can edit HTML, CSS, and JS, you can use this in any framework.

What we will be building

We will be building a rotating and fading text effect which I use on my homepage. Video below!

I originally got the idea from this example.

What is animejs?

animejs is a JS animation library with a simple API. It is a powerful library that can be used to create complex animations. With over 46k stars on GitHub, it is one of the most popular animation libraries.

Project setup

First install animejs with npm install animejs. I also use Tailwind so you will see some Tailwind classes in the HTML.

HTML

The idea here is to have each of our rotating words overlapping each other absolute positioned. We will then use animejs to reveal each word, then hide it, one at a time. Classes we will target with animejs are hero-animation, letters, el-0, and el-1. You can extend this to as many words as you want.

<div class="flex h-screen items-center justify-center">
  <h1 class="text-4xl font-semibold text-gray-700">
    Website
    <span class="hero-animation">
      <!-- hide text until anime.js setup -->
      <span
        class="text-wrapper relative ml-2 opacity-0 transition duration-500"
      >
        <!-- hidden text to make underline be right length -->
        <span
          class="absolute border-b-2 border-solid border-blue-700 text-transparent"
          >Developer</span
        >
        <!-- word 1 -->
        <span class="el-0 absolute border-t-2 border-transparent">
          <span class="letters">Designer</span>
        </span>
        <!-- word 2 -->
        <span class="el-1 absolute border-t-2 border-transparent">
          <span class="letters">Developer</span>
        </span>
      </span>
    </span>
  </h1>
</div>

JS

Now for the sauce. We will use the animejs timeline to synchronize multiple animations together.

First we wrap each letter in a span. This is so we can animate each letter individually. We will use the replace method to replace each letter with a span. The regex /([^\x00-\x80]|\w)/g will match each character in our strings. The el-0-letter and el-1-letter classes are to target each letter individually.

We use the opacity property to reveal and hide the words. We also use the delay property to delay the reveal of each word. The delay property takes a function which is called for each element in the targets array. We use this to delay each word by 34ms (the length of each letter animation).

import anime from "animejs/lib/anime.es.js";

// Wrap every letter in a span
var textWrappers = document.querySelectorAll(".hero-animation .letters");
textWrappers.forEach((textWrapper, idx) => {
  if (textWrapper.textContent) {
    textWrapper.innerHTML = textWrapper.textContent.replace(
      /([^\x00-\x80]|\w)/g,
      `<span class='el-${idx}-letter'>$&</span>`,
    );
  }
});

anime
  .timeline({ loop: true })
  .add({
    targets: [".hero-animation .el-0-letter"],
    opacity: [0, 1],
    easing: "easeOutExpo",
    duration: 600,
    delay: (el, i) => 34 * (i + 1),
  })
  .add({
    targets: ".hero-animation .el-0",
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000,
  })
  .add({
    targets: ".hero-animation .el-1-letter",
    opacity: [0, 1],
    easing: "easeOutExpo",
    duration: 600,
    delay: (el, i) => 34 * (i + 1),
  })
  .add({
    targets: ".hero-animation .el-1",
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000,
  });

// reveal text once anime.js setup
var textWrapper = document.querySelector(".hero-animation .text-wrapper");
if (textWrapper) textWrapper.classList.add("opacity-100");

Starwind UI

I've learned a lot developing with Astro. So I crafted 37+ animated and accessible components to help you get started with your next project. Inspired by shadcn/ui with seamless CLI installation. Free and open source.

Check it out

Results

CodePen

Animejs resources

• Website

• GitHub

• Docs

Great Success

Great success. 🚀

Don't forget to follow me on Twitter for more Astro, web development, and web design tips!