Sequential Fading jQuery Text Animation

Introducing Sequential Fading jQuery Text Animation – where words come alive on your website. With smooth fades and elegant transitions, your text captures attention effortlessly. Elevate your web design, engage visitors, and make a lasting impact. Explore the magic of subtle animation today!

Here is the HTML

<div class="intro_text">
    <h1>
      <span>Here jQuery Text Animation 1</span>
      <span>Here jQuery Text Animation 2</span>
      <span>Here jQuery Text Animation 3</span>
    </h1>
  </div>

jQuery code for functionality

(function ($) {
  "use strict";

  jQuery(document).ready(function ($) {
    //text animation code.mukto.info
    const spans = document.querySelectorAll('.intro_text h1 span');
    let index = 0;

    function fadeInNextSpan() {
      spans[index].style.display = 'inline';
      spans[index].style.opacity = 0;
      const fadeInEffect = setInterval(function () {
        if (spans[index].style.opacity < 1) {
          spans[index].style.opacity = parseFloat(spans[index].style.opacity) + 0.02;
        } else {
          clearInterval(fadeInEffect);
          setTimeout(fadeOutCurrentSpan, 5000); // Visible time of 5 seconds
        }
      }, 10); // Fading in over 1 second

    }

    function fadeOutCurrentSpan() {
      const fadeOutEffect = setInterval(function () {
        if (spans[index].style.opacity > 0) {
          spans[index].style.opacity = parseFloat(spans[index].style.opacity) - 0.02;
        } else {
          clearInterval(fadeOutEffect);
          spans[index].style.display = 'none';
          index = (index + 1) % spans.length;
          setTimeout(fadeInNextSpan, 10); // Gap between texts showing (1 seconds)
        }
      }, 10);
    }

    fadeInNextSpan(); // Start the animation loop

  });

}(jQuery));

We need a little CSS to hide all other text except 1st one

.intro_text h1 span{
  display: none;
}
.intro_text h1 span:first-child{
  display: block;
}

Use your creativity to customize your own way. Enjoy!