Logo Fader

Documentation

Code

<script>

document.addEventListener("DOMContentLoaded", () => {
  // Timing-Variablen
  const COLUMN_DELAY = 0.5; // Delay zwischen den Spalten (in Sekunden)
  const LOGO_VISIBLE_TIME = 2.5; // Wie lange ein Logo sichtbar bleibt (in Sekunden)
  const ANIMATION_DURATION = 1; // Dauer der Slide-Animation (in Sekunden)
  
  const columns = document.querySelectorAll(".logo-fader-column");
  
  columns.forEach((column, index) => {
    const imgs = column.querySelectorAll("img");
    if (imgs.length < 2) return;
    
    const [img1, img2] = imgs;
    
    // Initial setup: img1 natürlich, img2 direkt drüber (-200%)
    gsap.set(img1, { yPercent: 0 });
    gsap.set(img2, { yPercent: -200 });
    
    const tl = gsap.timeline({
      repeat: -1,
      delay: index * COLUMN_DELAY
    });
    
    // Beide zusammen nach unten schieben (img1 raus, img2 rein)
    tl.to([img1, img2], { yPercent: "+=100", duration: ANIMATION_DURATION, ease: "power2.inOut" })
      .to(img1, { opacity: 0, duration: ANIMATION_DURATION, ease: "power2.inOut" }, 0)
      .to({}, { duration: LOGO_VISIBLE_TIME }) // Pause
      
      // img1 ohne Animation wieder nach oben setzen (über img2) und opacity zurücksetzen
      .set(img1, { yPercent: -100, opacity: 1 })
      
      // Beide wieder nach unten schieben (img2 raus, img1 rein)
      .to([img1, img2], { yPercent: "+=100", duration: ANIMATION_DURATION, ease: "power2.inOut" })
      .to(img2, { opacity: 0, duration: ANIMATION_DURATION, ease: "power2.inOut" }, "-=" + ANIMATION_DURATION)
      .to({}, { duration: LOGO_VISIBLE_TIME }) // Pause
      
      // img2 ohne Animation wieder nach oben setzen (über img1) und opacity zurücksetzen
      .set(img2, { yPercent: -100, opacity: 1 });
  });
});

</script>