drupal-quartiersdedemain/web/themes/custom/quartiers_de_demain/js/animated_logo.js

function setLogoContainerSize() {
    let svgContainer = document.querySelector('#logo-animated');
    let svgElement = document.querySelector('#logo-animated svg');
    svgContainer.style.height = `${svgElement.clientHeight}px`;
  }
  setLogoContainerSize();
  window.addEventListener('resize', setLogoContainerSize);
  console.log('animated');

  let chemins = document.querySelectorAll('#logo-animated svg path');
  for (let chemin of chemins) {
    let length = chemin.getTotalLength();
    chemin.style.strokeDasharray = length;
    chemin.style.strokeDashoffset = length;
  }

  
  let consultationCouleur = document.querySelector('#consultation-couleur');
  let consultationNoir = document.querySelector('#consultation-noir');
  
  let quartierCouleur = document.querySelector('#quartier-couleur');
  let quartierNoir = document.querySelector('#quartier-noir');
  
  let consultationTranslate = 200;
  let quartierTranslate = -200;

  function startCountdown() {
    let startTime;
    let animationTime = 2000;

    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      const elapsedTime = timestamp - startTime;

      if (elapsedTime <= animationTime) {
        const animationPercent = elapsedTime / animationTime;
        animateLogo(animationPercent);
        requestAnimationFrame(animate);
      } else {
        animateLogo(1);
      }

    }
    requestAnimationFrame(animate);
  }

  function animateLogo(animationPercent) {
    for (let i = 0; i < chemins.length; i++) {
      let draw = chemins[i].getTotalLength() * animationPercent;
      chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
      chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
    }
    let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
    let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);

    consultationCouleur.style.opacity = animationPercentCouleur;
    consultationNoir.style.opacity = animationPercentNoir;
    quartierCouleur.style.opacity = animationPercentCouleur;
    quartierNoir.style.opacity = animationPercentNoir;

    consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;

    quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
  }



  window.addEventListener('load', startCountdown);