citrus/resources/views/templates/neler-yapariz-gsap/js/footerlogo.js

{
  addEventListener("GSAPReady", (event) => {
    const wrapper = document.querySelector("[data-animate='footerlogo']");
    if (!wrapper) return;

    const paths = [...wrapper.querySelectorAll("path")].reverse();
    const lastPath = paths[paths.length - 1];

    // Configuration for the footer logo animation
    const FOOTER_ANIMATION_CONFIG = {
      STAGGER: 0.05,
      VISIBILITY_DURATION: 0.1,
    };

    // Set initial state
    gsap.set(paths, {
      autoAlpha: 0,
    });

    const animateFooterLogo = () => {
      // Reset the last path visibility before starting the animation
      gsap.set(lastPath, { autoAlpha: 0 });

      const tl = gsap.timeline();

      paths.forEach((path, index) => {
        const baseDelay = index * FOOTER_ANIMATION_CONFIG.STAGGER;
        const isLastPath = index === paths.length - 1;

        // Flash animation
        tl.to(
          path,
          {
            autoAlpha: 1,
            duration: 0.1,
            ease: "none",
          },
          baseDelay
        );

        // Only fade out if it's not the last path
        if (!isLastPath) {
          tl.to(
            path,
            {
              autoAlpha: 0,
              duration: 0.1,
              ease: "none",
            },
            baseDelay + FOOTER_ANIMATION_CONFIG.VISIBILITY_DURATION
          );
        }
      });

      return tl;
    };

    // Create the scroll trigger
    ScrollTrigger.create({
      trigger: wrapper,
      start: "top bottom",
      end: "bottom top",
      onEnter: () => animateFooterLogo(),
      onEnterBack: () => animateFooterLogo(),
    });

    // console.log(event.detail);
  });
}