title: How to get text from .InnerHTML to fade-in and fade-out when it changes
body: <p>I have a script that is simply changing text on my HTML page. It's text of &quot;testimonials&quot; that are set to change every 8 seconds. The script itself works fine but I am unable to get the text to fade-in when it changes again. You can see from my code that I'm able to get it to fade-in but it only does it on the very first time which is actually hard-coded into the code.</p>
  <p>I've seen people post about how to change when you hover or click on something, but not when it's text being changed from a script.</p>
  <p>Thanks in advance for helping out a newbie! :-)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    const testimonials = [
        {
          name: "Robert - Louisville, KY",
          quote:
            '"I\'m not one to do readings but I actualy enjoyed the experience. Learning about the past, present, and future of my career was not only entertaining but insightful."',
        },
        {
          name: "Tyler - Louisville, KY",
          quote:
            '"It helped me gain some closure and realize that I can\'t just sit here and let life work itself out. I have to take my own initiative."',
        },
        {
          name: "Jason &amp; Joey - Tampa, FL",
          quote:
            '"Kevin’s reading was spot-on! We went into it just for fun, without any expectations, and found ourselves nodding in agreement with everything he said. He was thorough in his explanations and made sure we understood exactly what the cards meant. We highly recommend a reading by Kevin."',
        },
      ];
      
      let counter = 0;
      const testimonialQuote = document.getElementById("newQuote");
      const testimonialName = document.getElementById("newName");
      const changeTime = setInterval(newTestimonial, 8000);
      
      function newTestimonial() {
        console.log("Starting function");
        testimonialQuote.innerHTML = Object.values(testimonials[counter])[1];
        testimonialName.innerHTML = Object.values(testimonials[counter])[0];
        counter++;
        if (counter &gt;= testimonials.length) {
          counter = 0;
        }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .quote-name-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        animation: fadeIn 1s ease-in;
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      
      .testimonial-container #newQuote {
        font-size: 1.6rem;
        line-height: 2.2rem;
        margin-top: 1rem;
        text-align: center;
      }
      
      .testimonial-container #newName {
        font-size: 1.6rem;
        line-height: 2.2rem;
        margin-top: 1rem;
        text-align: center;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="testimonial-container"&gt;
              &lt;h2 class="testimonial-header"&gt;Testimonials&lt;/h2&gt;
              &lt;div class="quote-name-container"&gt;
                &lt;div id="newQuote"&gt;
                  &lt;!-- This is where the quote for the testimonial will go --&gt;
                  &lt;p&gt;"I'm not one to do readings but I actualy enjoyed the experience. Learning about the past, present, and future of my career was not only entertaining but insightful."'&lt;/p&gt;
                  &lt;p&gt;Robert - Louisville, KY&lt;/p&gt;
                &lt;/div&gt;
                &lt;div id="newName"&gt;
                  &lt;!-- This is where the name for the quote will go --&gt;
                &lt;/div&gt;
                &lt;script src="changetestimonial.js"&gt;&lt;/script&gt;
              &lt;/div&gt;
            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>