Auto Shuffle Text Animation

Auto Shuffle Text Animation

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how you can create this beautiful animation of text. You might have seen many animations on text like the typing effect which is broadly used in many portfolio websites. This is another animation in the same genre but with a twist Here's a preview -

screen-capture-_1_.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

##HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Rotating Text</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="rotating-text">
  <p>Coding is</p>
  <p>
    <span class="word red">awesome.</span>
    <span class="word purple">beautiful.</span>
    <span class="word blue">creative.</span>
    <span class="word green">fabulous.</span>
    <span class="word yellow">interesting.</span>
  </p>
</div>

  <script  src="script.js"></script>

</body>
</html>

Step - 3: Below is the CSS code for styling.

##CSS

@import url(https://fonts.googleapis.com/css?family=Lato:600);
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}
.rotating-text {
  font-family: Lato, sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: white;
  transform: translateX(-80px);
}
.rotating-text p {
  display: inline-flex;
  margin: 0;
  vertical-align: top;
}
.rotating-text p .word {
  position: absolute;
  display: flex;
  opacity: 0;
}
.rotating-text p .word .letter {
  transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
  transform: rotateX(90deg);
  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
  transition: 0.38s ease;
}
.rotating-text p .word .letter.behind {
  transform: rotateX(-90deg);
}

.red {
  color: #e74c3c;
}

.purple {
  color: #8e44ad;
}

.blue {
  color: #3498db;
}

.green {
  color: #2ecc71;
}

.yellow {
  color: #f1c40f;
}

Step - 4: Below is the JavaScript code which is the most important part in this Animation. Javascript code might look tedious or hard but believe me it's not. Let me tell you in short. We're just catching each letter of the alphabet and assigning it two animations - 'letter-in' and 'letter-out'. Along with a delay to the next alphabet of 0.32s. So the animation will look beautiful.

##JS

"use strict";
let words = document.querySelectorAll(".word");
words.forEach(word => {
    let letters = word.textContent.split("");
    word.textContent = "";
    letters.forEach(letter => {
        let span = document.createElement("span");
        span.textContent = letter;
        span.className = "letter";
        word.append(span);
    });
});
let currentWordIndex = 0;
let maxWordIndex = words.length - 1;
words[currentWordIndex].style.opacity = "1";
let rotateText = () => {
    let currentWord = words[currentWordIndex];
    let nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
    Array.from(currentWord.children).forEach((letter, i) => {
        setTimeout(() => {
            letter.className = "letter out";
        }, i * 80);
    });
    nextWord.style.opacity = "1";
    Array.from(nextWord.children).forEach((letter, i) => {
        letter.className = "letter behind";
        setTimeout(() => {
            letter.className = "letter in";
        }, 340 + i * 80);
    });
    currentWordIndex =
        currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.