CODEWITHSUNDEEP
javascriptloopssetintervaltransition
Ellie
Ellie

Reputation: 1

JS animation Loop Transitions

var i = 1; 
const title = document.getElementById("display-heading");
var texts = [
    "Karibu",
    "Bienvenido",
      "স্বাগতম।",
      "Willkommen",
      "أهلا بك",
      "Bienvenue"
];

title.textContent = texts[0];

var loop = setInterval(function() {
    title.textContent = texts[i];
    i = (i+1) % texts.length; // Allows the array to loop
}, 1000);

How would I add a fade in/slow down the transition?

https://codepen.io/elliebrayton/pen/vYJBOBP

Upvotes: 0

Views: 457

Answers (1)

trincot
trincot

Reputation: 350866

There is a little discrepancy between the CSS and the HTML: the HTML has an id attribute with name "display-heading", while the CSS defines attributes for a class with that name.

You can get the fading going by changing the opacity.

Here is a runnable snippet:

const title = document.getElementById("display-heading");

var texts = [
    "Karibu",
    "Bienvenido",
    "স্বাগতম।",
    "Willkommen",
    "أهلا بك",
    "Bienvenue"
];

title.addEventListener("transitionend", loop);

function loop() {
    if (title.style.opacity != "1") {
        texts.push(title.textContent = texts.shift());
        title.style.opacity = 1;
    } else {
        setTimeout(() => title.style.opacity = 0, 500);
    }
}

setTimeout(loop);
#display-heading{
  font-size: 30px;
  transition: 0.5s opacity;
  opacity: 0;
}
<h1 id='display-heading'>Welcome</h1>

Upvotes: 1

Related Questions