Animation delay with html/css/js animation

  animation, css, html, javascript, transform

I have an animation which makes text change by sliding vertically (similar to the one on groupebouchersports.com‘s homepage). The problem is, I want the text to stop longer (delay) before sliding out, but I cant seem to find how to do it. Here is my html / css / javascript code. Thanks in advance.

document.addEventListener('DOMContentLoaded', initTextAnimSlider);

function initTextAnimSlider() {
    var textAnimHolder = document.querySelector('[data-words]');
    var textAnimItem = document.querySelectorAll('.text-anim-item');
    var textAnimItems = document.querySelector('.text-anim-items');
    var animIn = 'anim-in';
    var animOut = 'anim-out';
    var lineActiveClass = 'line-active';
    var animNextItem = null;
    var animPrevItem = null;
    var animFirstLoad = false;
    var animDuration = textAnimHolder.getAttribute('data-delay');
    var animCounter = 0;
    var setTimeAnim;
    var setTimeAnimResize;

    animFunc();
    getHolderWidth();

    function animFunc() {
        clearTimeout(setTimeAnim);

        setTimeAnim = setTimeout(function () {
            animFirstLoad = true;
            
            if (animPrevItem !== null) {
                animPrevItem.classList.add(animOut);
            }
            animNextItem = textAnimItems.children[animCounter];
            animNextItem.classList.remove(animOut);
            animNextItem.classList.add(animIn);

            

            animPrevItem = animNextItem;

            if (animCounter === textAnimItem.length - 1) {
                animCounter = 0;
            } else {
                animCounter++;
            }
            animFunc();
        }, animFirstLoad ? animDuration : 100);
    }

    function getHolderWidth() {
        var itemsWidth = [];

        for(var i =0; i < textAnimItem.length; i++) {
            itemsWidth.push(textAnimItem[i].clientWidth);
            console.log(textAnimItem[i].clientWidth);
        }


        textAnimHolder.style.width = '450px';
    }

    function resizeHandler() {
        clearTimeout(setTimeAnim);
        clearTimeout(setTimeAnimResize);
        getHolderWidth();

        setTimeAnimResize = setTimeout(function() {
            animFunc();
        }, 50);
    }

    window.addEventListener('resize', resizeHandler);
    window.addEventListener('orientationchange', resizeHandler);
}
.text-anim-item {
    white-space: nowrap;
    position: absolute;
    left: 0;
    right:auto;
    bottom: 0;
    
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
}



.text-anim-item.anim-in {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
    
    -webkit-animation: textAnimIn .6s .3s forwards;
    animation: textAnimIn .6s .3s forwards;
    
    
}

.text-anim-item.anim-out {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
    
    -webkit-animation: textAnimOut .6s .3s  forwards;
    animation: textAnimOut .6s .3s  forwards;
    
}

@-webkit-keyframes textAnimIn {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
        
    }
    
}

@keyframes textAnimIn {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
}

@-webkit-keyframes textAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}

@keyframes textAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}

@-webkit-keyframes textAnimInCenter {
    0% {
        -webkit-transform: translate3d(-50%, -120%, 0);
        transform: translate3d(-50%, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(-50%, 10%, 0);
        transform: translate3d(-50%, 10%, 0);
    }
}

@keyframes textAnimInCenter {
    0% {
        -webkit-transform: translate3d(-50%, -120%, 0);
        transform: translate3d(-50%, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(-50%, 10%, 0);
        transform: translate3d(-50%, 10%, 0);
    }
}

@-webkit-keyframes textAnimOutCenter {
    0% {
        -webkit-transform: translate3d(-50%, 0%, 0);
        transform: translate3d(-50%, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(-50%, 120%, 0);
        transform: translate3d(-50%, 120%, 0);
    }
}

@keyframes textAnimOutCenter {
    0% {
        -webkit-transform: translate3d(-50%, 0%, 0);
        transform: translate3d(-50%, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(-50%, 120%, 0);
        transform: translate3d(-50%, 120%, 0);
    }
}
<section class="bg-img intro-module">

                <div class="block-center">
                <div class="block-caption py-4 text-center text-md-left">
                        <h1 style="text-align:left;" class="display-1 mb-0">
                            <u class="mb-0" data-delay="1200" data-words>
                                &nbsp;
                                <span style="text-align:left;" class="text-anim-items">
                                    <span  class="text-anim-item"><span>text</span></span>
                                    <span  class="text-anim-item"><span>text 2</span></span>
                                    <span  class="text-anim-item"><span>text 3</span></span>
                                </span>
                                <span class="anim-line"></span>
                            </u> 
                            <br>
                            <span>lorem</span>
                            <br>
                            <span>ipsum</span>
                            <br>
                            <br>
                            <span><p>caption text</p></span>
                            </h1>
                    </div>
                </div>
</section>

Source: Ask Javascript Questions

LEAVE A COMMENT