Problema CSS/JS. Oare are cineva cunostintele necesare?

[akaroot]

Incerc sa refac efectul de scroll al logoului de la gucci : https://www.gucci.com/ro/en_gb/

Dar Nu am reusit sa creez animatia nici cum ... exemplu : https://goiaandrei.com/

 

Am folosit codul de mai jos:

HTML:

<div id="stickyNav">
  GOIA
</div>

CSS:

#stickyNav {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  font-size: 10vw; /* Initial large size */
  color: white;
  text-align: center;
  white-space: nowrap;
}

.isSticky {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4vw; /* Smaller size when fixed */
  color: black;
}

JS:

document.addEventListener('DOMContentLoaded', function() {
  const nav = document.getElementById('stickyNav');
  let isSticky = false;

  function setStickyClass(sticky) {
    if (sticky && !isSticky) {
      nav.classList.add('isSticky');
      isSticky = true;
    } else if (!sticky && isSticky) {
      nav.classList.remove('isSticky');
      isSticky = false;
    }
  }

  window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > 150) {
      setStickyClass(true);
    } else {
      setStickyClass(false);
    }
  });
});

Are cineva cunostintele necesare si bunavointa sa ma ajute? Nu mai stiu cum sa il invart sa functioneze...