<style>
    .text-slide--down.active div {
        clip-path: inset(-10% 0 -20% 0);
    }
    .text-slide--down div {
        will-change: auto;
        clip-path: inset(100% 0 0 0);
        transition: all 1.2s ease-in 0.6s;
    }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var textAnim = document.querySelectorAll('.text-slide--down');
    var textAnimDelay = 0.6;
        
    textAnim.forEach((item) => {
        item.classList.add('active');
            
        var textAnimContent = item.querySelector('div');
        if (textAnim.length > 2) {
            textAnimDelay += 0.2;
            textAnimContent.style.transitionDelay = "" + textAnimDelay + "s";
        }
    })
});
</script>

<style>
.text-slide--up.active div {
    transform: translate3d(0,0,0);
    transition: transform .8s cubic-bezier(.37,.31,0,1) 0.6s;
}
.text-slide--up div {
    transform: translate3d(0,100%,0); 
}
.text-slide--up {
    overflow: hidden;
}
</style>
<script>
    window.onload = function() {
        var textAnim2 = document.querySelectorAll('.text-slide--up');
        textAnim2.forEach((item) => item.classList.add('active'));
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        var textAnim2 = document.querySelectorAll('.text-slide--up');
        var textAnimDelay2 = 0.6;
        
        textAnim2.forEach((item) => item.classList.add('active'));
        
        for (let j = textAnim2.length - 1; j >= 0; j -= 1) {
            var textAnimContent2 = textAnim2[j].querySelector('div');

            if (textAnim2.length > 1) {
                textAnimDelay2 += 0.2;
                textAnimContent2.style.transitionDelay = "" + textAnimDelay2 + "s";

            }
        }
    })
</script>