Rotating Text Animation

Question

At the very beginning of this website https://hype4.com/, there is a text animation after the word "We build". I tried to find how it's been made. I only got the related CSS part of it. However, couldn't find the JS part.

HTML part

<h1 class="mainPrimaryHeading mainPrimaryHeading2020">
    <span class='topText'>We build 
        <span class='textGradient noAfter animationRotateText'>
            <span class='word'>successful</span>
            <span class='word'>converting</span>
            <span class='word'>functional</span>
            <span class='word'>lovable</span>
            <span class='word'>engaging</span>
            <span class='word'>memorable</span>
        </span>
    </span> 
    <strong class='bottomText'>web&nbsp;and mobile products</strong>
</h1>

CSS styles and classes

.mainPrimaryHeading {
    font-size: 60px;
    letter-spacing: .99px;
    margin: 0 auto 42px auto;
    line-height: 63px;
    font-weight: 900;
}

.topText{
    position: relative;
} 

.animationRotateText {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    width: 300px;
    height: 60px;
    line-height: 1.3;
}

.textGradient {
    position: relative;
    background: -webkit-linear-gradient(319.11deg,#5668f2 0%,#b77dfb 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.word {
    position: absolute;
    width: 340px;
    opacity: 0;
    top: -8px;
    left: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    margin: 0 0 0 19px;
}

.letter {
    display: inline-block;
    position: relative;
    float: left;
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
    -webkit-transform-origin: 50% 50% 25px;
    transform-origin: 50% 50% 25px;
    background: -webkit-linear-gradient(319.11deg,#5668f2 0%,#b77dfb 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.letter.out {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transition: -webkit-transform 0.32s cubic-bezier(.55,.055,.675,.19);
    transition: -webkit-transform 0.32s cubic-bezier(.55,.055,.675,.19);
    transition: transform 0.32s cubic-bezier(.55,.055,.675,.19);
    transition: transform 0.32s cubic-bezier(.55,.055,.675,.19),
    -webkit-transform 0.32s cubic-bezier(.55,.055,.675,.19);
}

In the CSS file there are style classes named .letter and .out. These two style classes are not included in html file. That means these are style classes are added by JavaScript. But I could find the associative JS part.

I would be glad if anyone can tell how it's made or any tutorial links. Thanks in advance

Answer 1

It does this whole process with css animations. You didn't copy the jquery part where it breaks the words down into letters.

 var words = document.getElementsByClassName("word");
        var wordArray = [];
        var currentWord = 0;

        if (words.length > 0) {
            words[currentWord].style.opacity = 1;
            for (var i = 0; i < words.length; i++) {
                splitLetters(words[i]);
            }
        }

        function changeWord() {
            var cw = wordArray[currentWord];
            var nw =
                currentWord == words.length - 1
                    ? wordArray[0]
                    : wordArray[currentWord + 1];
            for (var i = 0; i < cw.length; i++) {
                animateLetterOut(cw, i);
            }

            for (var i = 0; i < nw.length; i++) {
                nw[i].className = "letter behind";
                nw[0].parentElement.style.opacity = 1;
                animateLetterIn(nw, i);
            }

            currentWord =
                currentWord == wordArray.length - 1 ? 0 : currentWord + 1;
        }

        function animateLetterOut(cw, i) {
            setTimeout(function() {
                cw[i].className = "letter out";
            }, i * 80);
        }

        function animateLetterIn(nw, i) {
            setTimeout(function() {
                nw[i].className = "letter in";
            }, 340 + i * 80);
        }

        function splitLetters(word) {
            var content = word.innerHTML;
            word.innerHTML = "";
            var letters = [];
            for (var i = 0; i < content.length; i++) {
                var letter = document.createElement("span");
                letter.className = "letter";
                letter.innerHTML = content.charAt(i);
                word.appendChild(letter);
                letters.push(letter);
            }

            wordArray.push(letters);
        }

        if (window.outerWidth > 650 && words.length > 0) {
            changeWord();
            setInterval(changeWord, 4000);
        }