[Sergey-web92]

Здравствуйте. Помогите пожалуйста реализовать плавное появление блоков как в этом примере https://www.youtube.com/watch?v=qXnv_Jcx6Ac.
Нужно, чтобы блоки появлялись слева направо(при этом здесь последующий блок появляется до того как предыдущий откроется полностью); также блоки появляются слегка снизу вверх.

Сейчас у меня блоки просто появляются друг за другом и полностью идет появление снизу вверх. Пример того как у меня сейчас работает https://www.youtube.com/watch?v=BKUQkmIKCAk.

В коде использовал библиотеку animate.css и jQuery

<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
                    <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div>
<!-- column-2 -->
                    <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div>
<!-- column-3 -->
                    <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div>
<!-- column-4 -->
                    <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div>
</div>

// ==анимация появления плиток
let block_show = false;
 
function scrollTracking(){
    if (block_show) {
        return false;
    }
 
    let wt = $(window).scrollTop();
    let wh = $(window).height();
    let et = $('.grid-container').offset().top;
    let eh = $('.grid-container').outerHeight();
    let dh = $(document).height();   
 
    if (wt + wh >= et || wh + wt == dh || eh + et < wh){
        block_show = true;
        
        $('.grid-container__col-1:eq(0)').fadeIn(300, function(){
    $(this).next().fadeIn(300, arguments.callee);
});
        
    }
}
 
$(window).scroll(function(){
    scrollTracking();
});
    
$(document).ready(function(){ 
    scrollTracking();
});