BarbaJS doesn't animate the proper way and stops when enter homepage

Question

I want the animation that starts after entering the home page to start every time you enter it.

In addition, I want the transitions between pages to have a different type of animation.

I managed to do almost everything, but unfortunately, at the moment of transition between the project page and the main page, the animation stops. I do not understand why.

Here is the website: https://dzm11.github.io/portfolio/

The error appear when you scroll down to "Kiddy" project and click VIEW PROJECT. Then page do animation that I want. Then You have to scroll up to the top of the website and click LOGO. This is the time when the error happen. The black screen freeze and dont transform anyway.

JS code:

// entryAnimation
const text = document.querySelector(".preloader__text--content");
const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for (let i = 0; i < splitText.length; i++) {
text.innerHTML += "<span>" + splitText[i] + "</span>"
}

let char = 0;
let timer = setInterval(onTick, 50);

function onTick(){
  const span = text.querySelectorAll('span')[char]
  span.classList.add('fade');
  console.log(char)
  char++;
  if(char===splitText.length){
    complete();
    setTimeout(() => {
      preloader.classList.add('hide');
    }, 1500);

    return;
  }
}

function complete(){
  clearInterval(timer);
  timer = null;
}

barba.use(barbaCss);

// barba.hooks.enter(() => {
//   window.scrollTo(0, 0);
// });

barba.init({
  transitions: [
{
      name: 'cover',
      to:{
        namespace: ['home', 'project']
      },
      leave(){},
      enter(){},
    },
    {
      name: 'entry',
      once(){}
    }
  ],
  views: [{
    namespace: 'home',
    beforeEnter(data) {
      preloader.classList.add('hide');
    }
  }]
});

const preloader = document.querySelector(".preloader");

HTML Code:

 <div class="preloader">

                <h1 class="fs-header-1 fw-demi preloader__text--content">H E N L O</h1>

        </div>

Css code:

.preloader {
    position: fixed;
    transform: translateY(0);
    background-color: var(--clr-neutral-900);
    height: 100vh;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .7s cubic-bezier(0.7, 0, 0.3, 1);
    &.hide{
        transform: translateY(-100%);
    }

    &__text--content {
        overflow: hidden;
        display: block;
        position: absolute;

        span {
            transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
            display: inline-block;
            position: relative;
            color: var(--clr-neutral-100);
            transform: translateY(100%);
        }

        span.fade {
            transform: translateY(0%);

        }
    }
}

.entry-once .preloader {
    transform: translateY(0%);
}

.entry-once-active,
.entry-once-active .preloader {
    transition: transform .7s cubic-bezier(0.7, 0, 0.3, 1) 1.3s;
}

.entry-once-to .preloader {
    transform: translateY(100%);
}




.transition {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--clr-neutral-900);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    z-index: 1;
}

.cover-leave-active,
.cover-enter-active,
.cover-leave-active .transition,
.cover-enter-active .transition {
    transition: transform .7s cubic-bezier(0.7, 0, 0.3, 1);
}

.cover-leave .transition {
    transform: translateY(-100%);
}

.cover-leave-to .transition {
    transform: translateY(0);
}

.cover-enter .transition {
    transform: translateY(0);
}

.cover-enter-to .transition {
    transform: translateY(100%);
}

I tried almost everything and I think I just dont understand the mechanics of BarbaJS