How to correctly fade text in and out

Issue

I have been trying to get this to work and to no avail. It seems to work at first sight but after the animation runs a few times it starts getting choppy and out of order.

I have a set of divs that contains text within each. I am grabbing the text in a .each() loop in jQuery and sending them to another function to animate them. I have integrated a setTimeout Function as well as a delay in the animation to loop back and repeat the process.

The issue I am finding is that after a few rounds the animation starts to break.

How can I modify my code to correctly animate between the text.

Codepen Link: https://codepen.io/DigitalDesigner/pen/vYbmMLo

$(function(){
    homeCaptions();
});

function homeCaptions(){

    let timeout = 0;
    $('.js-caption').each(function (){
        let _this = $(this);
        setTimeout( function(){
            let text = _this.text();
            animateText(text);
        }, timeout);
        timeout += 7500;
    });
    function animateText(text){
        // clear current content from caption-loaded class
        $('.caption-loaded').empty(); // TODO: Update this to be more animated

        let words = text.split(" ");
        for (let i = 0; i < words.length - 1; i++) {
            words[i] += " ";
        }
        $(words).each(function (){
            // setTimeout(function(){
                $('.caption-loaded').append('<span class="caption-item">' + this + '</span>').hide().fadeIn();
            // }, 500);
        });
        // $('.caption-loaded').addClass('active');
        setTimeout(function(){
            homeCaptions();
        }, 11000);
    };
};

.js-caption{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="js-caption">test the first sentence</div>
<div class="js-caption">test the second sentence</div>

        <div class="caption-loaded"></div>

Solution

After a lot of fiddling around I was able to successfully accomplish this task. I had to use a little JavaScript and a bit of keyframe animations to get the job done but its all working and not breaking.

Here is the final code

window.addEventListener('load', function() {
    var fadeLineDivs = document.querySelectorAll('.fade-line');
    fadeLineDivs.forEach(function(fadeLineDiv) {
        var textContent = fadeLineDiv.textContent;
        var words = textContent.split(' ');
        fadeLineDiv.innerHTML = '';
        words.forEach(function(word) {
            var span = document.createElement('span');
            span.textContent = word + ' ';
            span.classList.add('fade-word');
            fadeLineDiv.appendChild(span);
        });
    });
});

@keyframes fadeLine {
            0%, 25% {
                opacity: 0;
            }
            26%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord1 {
            0%, 25% {
                opacity: 0;
            }
            29%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord2 {
            0%, 29% {
                opacity: 0;
            }
            32%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord3 {
            0%, 32% {
                opacity: 0;
            }
            35%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord4 {
            0%, 35% {
                opacity: 0;
            }
            38%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord5 {
            0%, 38% {
                opacity: 0;
            }
            41%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord6 {
            0%, 41% {
                opacity: 0;
            }
            44%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        .fade-line {
            position: absolute;
            opacity: 0;
            animation: fadeLine 12s ease-in-out forwards;
            animation-iteration-count: infinite;
        }
        .fade-line:nth-child(2),
        .fade-line:nth-child(2) .fade-word {
            animation-delay: 6s;
        }
        .fade-word {
            opacity: 0;
            animation: fadeWord6 12s ease-in-out forwards;
            animation-iteration-count: infinite;
        }
        .fade-word:nth-child(1) {
            animation-name: fadeWord1;
        }
        .fade-word:nth-child(2) {
            animation-name: fadeWord2;
        }
        .fade-word:nth-child(3) {
            animation-name: fadeWord3;
        }
        .fade-word:nth-child(4) {
            animation-name: fadeWord4;
        }
        .fade-word:nth-child(5) {
            animation-name: fadeWord5; 
        }

    <div id="text-container">
        <p class="fade-line">First line of text</p>
        <p class="fade-line">Second line of text</p>
    </div>

Answered By - DigitalDesigner