Create simple words loop animation with couple lines of JavaScript

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

HTML

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

JavaScript

  <script>
    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);
  </script>

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