Displaying Different Texts Sequentially from an Array with javascript

 const outputElement = document.getElementById('output');

const textArray = ['First text message.', 'Second text message.', 'Third text message.'];

let currentIndex = 0;

function displayNextText() {

    if (currentIndex < textArray.length) {

        // Replace the entire content with the current text

        outputElement.innerHTML = textArray[currentIndex];

        currentIndex++;

        // Schedule the next text to be displayed after a delay (e.g., 2 seconds)

        setTimeout(displayNextText, 2000); // 2000 milliseconds = 2 seconds

    }

}

// Start the display sequence

displayNextText();

===============================

Text Sequentially with CSS

<div class="text-container">

  <div class="text-item">First Text</div>

  <div class="text-item">Second Text</div>

  <div class="text-item">Third Text</div>

</div>

.text-container {

  display: grid;

  grid-template-areas: "content";

}

.text-item {

  grid-area: content;

  opacity: 0;

  animation: slideIn 6s infinite;

}

/* Stagger animation with delays */

.text-item:nth-child(1) { animation-delay: 0s; }

.text-item:nth-child(2) { animation-delay: 2s; }

.text-item:nth-child(3) { animation-delay: 4s; }

@keyframes slideIn {

  0% { opacity: 0; }

  10% { opacity: 1; }

  30% { opacity: 1; }

  40% { opacity: 0; }

  100% { opacity: 0; }

}