Create simple words loop animation with couple lines of JavaScript

Create simple words loop animation with couple lines of JavaScript

Published: 17 July 2020

Why do you want to use it?

I worked on a project where clients wanted to have simple word rotation animation created and have new item added every week for next couple of months. Their idea was to create .gif and have it updated weekly by both designer and developer.

This solution could definitely work but we suggested creating it with a bit of HTML, CSS and JavaScript. This has reduced work time, no images need to be downloaded, text is clear and updates take less than a minute.

Demo


A little bit of HTML and JavaScript

HTML

<h2 id="animated-heading"></h2>

JavaScript

var thankYouWords = ["Благодаря", "Hvala", "Dík", "Tak", "Bedankt", "Thanks", "Aitäh", "Kiitos", "Merci", "Vielen Dank", "Ευχαριστώ", "Kösz", "Go raibh maith agat", "Grazie", "Paldies", "Dėkoju", "Grazzi", "Dzięki", "Obrigado", "Mulțumiri", "Vďaka", "Hvala", "Gracias", "Tack"];

function displayThankYouWords(index) {
  if (index >= thankYouWords.length) {
      index = 0;
  }

  var animatedHeading = document.getElementById("animated-heading");

  animatedHeading.innerHTML = thankYouWords[index];

  setTimeout(function() {
      displayThankYouWords(index + 1)
  }, 1500);
}

displayThankYouWords(0);

This very simple piece of code saved plenty of time creating .gif image as originally suggested as well as update time is possible in less than 1 minute and can be done by anybody as it only involves copy/paste skills.

I hope this little snippet of code helps you.

Happy coding

Twitter feed

Recommended Web Hosting

Digital ocean ad