Take a look at the sample on stackblitz Stackblitz
Here's my updated version of the component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'animation-container',
templateUrl: './text-rotate.component.html',
styleUrls: [ './text-rotate.component.css' ]
})
export class AnimationContainer implements OnInit {
phraseIndex = 1;
wordIndex = 0;
texts = [
["No!", "This is", "Patrick!"],
["I can't", "see my", "forehead"],
["Is mayonnaise", "an instrument?"],
["F stands", "for Fun", "🎶"],
["I wumbo", "you wumbo", "he/she/me wumbo"],
["It may be", "stupid, but", "it's also dumb"],
["Moss always", "points to", "civilization"]
];
next(text, element) {
let sample = document.querySelector(element);
if (sample.dataset.animating === "true") return;
let sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight
let sampleT = sample.textContent; // old text
let sampleNT = text; // new text
sample.dataset.animating = "true";
sample.style.height = sampleH + "px";
// original text element
let samO = document.createElement("div");
samO.style.transformOrigin = "0 " + sampleH / 2 + "px -" + sampleH / 2 + "px";
samO.classList.add("text");
samO.textContent = sampleT;
// new text element
let samN = samO.cloneNode();
samN.textContent = sampleNT;
sample.textContent = "";
sample.appendChild(samO);
sample.appendChild(samN);
samO.classList.add("text-out");
samN.classList.add("text-in");
samN.addEventListener("animationend", function(event) {
sample.removeChild(samO);
sample.removeChild(samN);
sample.textContent = sampleNT;
sample.dataset.animating = "false";
});
}
changeText(){
if (this.wordIndex > 2) {
this.wordIndex = 0;
this.phraseIndex++;
}
if (this.phraseIndex >= this.texts.length) {
this.phraseIndex = 0;
}
let term = this.texts[this.phraseIndex][this.wordIndex];
this.next(term, ".text-" + ++this.wordIndex);
if (this.wordIndex == 3) {
setTimeout(()=>this.changeText(), 2000);
} else {
setTimeout(()=>this.changeText(), 150);
}
}
ngOnInit(){
setTimeout(()=>this.changeText(), 200);
}
}