Untitled

<script>
  const backgroundImageEmpty =
        "linear-gradient(90deg, rgba(141, 93, 217, 0), rgba(138, 185, 255, 0))";
  const backgroundImageFill =
        "linear-gradient(90deg,rgba(141, 93, 217, 1),rgba(138, 185, 255, 1))";

  // Match for screens wider than 768px
  mm.add("(min-width: 768px)", () => {
    let svg = document.querySelector(".stage_path-desktop-on svg");
    let path = svg.querySelector("path");
    let pathLength = path.getTotalLength();

    gsap.set(path, {
      strokeDasharray: pathLength,
    });

    const stage_tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".section_campaign",
        start: "top 0%",
        end: "bottom 0%",
        markers: false,
        pin: true,
        // scrub: 1,
        scrub: 0.5,
        ease: "power1.inOut",
      },
    });

    stage_tl.fromTo(
      path,
      {
        display: "none",
        strokeDashoffset: pathLength,
      },
      {
        display: "block",
        strokeDashoffset: 0,
        duration: 10,
        ease: "none",
      },
      "a"
    );

    // common :
    stage_tl.set(
      ".stage_item .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "0.24",
      },
      "a"
    );

    // Define Step 1 label
    stage_tl.addLabel("step1", "a");

    stage_tl
      .to(
      ".stage_item-reach .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0.5,
      },
      "step1"
    )
      .to(
      ".stage_item-reach .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-attention .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    )
      .to(
      ".stage_item-attention .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-engagement .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    )
      .to(
      ".stage_item-engagement .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-awareness .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    )
      .to(
      ".stage_item-awareness .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-impact .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    );

    return () => {
      // Add clean-up logic here
    };
  });

  // Match for screens narrower than 768px
  mm.add("(max-width: 767px)", () => {
    let svg = document.querySelector(".stage_path-mobile-on svg");
    let path = svg.querySelector("path");
    let pathLength = path.getTotalLength();

    gsap.set(path, {
      strokeDasharray: pathLength,
    });

    const stage_tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".section_campaign .stage_grid",
        start: "top 50%",
        end: "bottom 90%",
        markers: false,
        // scrub: 1,
        scrub: 0.5,
        ease: "power1.inOut",
      },
    });

    stage_tl.fromTo(
      path,
      {
        display: "none",
        strokeDashoffset: pathLength,
      },
      {
        display: "block",
        strokeDashoffset: 0,
        duration: 10,
        ease: "none",
      },
      "a"
    );

    // common :
    stage_tl.set(
      ".stage_item .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "0.24",
      },
      "a"
    );

    // Define Step 1 label
    stage_tl.addLabel("step1", "a");

    stage_tl
      .to(
      ".stage_item-reach .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0.5,
      },
      "step1"
    )
      .to(
      ".stage_item-reach .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-attention .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    )
      .to(
      ".stage_item-attention .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-engagement .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    )
      .to(
      ".stage_item-engagement .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-awareness .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    )
      .to(
      ".stage_item-awareness .stage_button",
      {
        backgroundImage: backgroundImageEmpty,
        opacity: "1",
        delay: 1,
      },
      ">0"
    )
      .to(
      ".stage_item-impact .stage_button",
      {
        backgroundImage: backgroundImageFill,
        opacity: "1",
        delay: 0,
      },
      ">0"
    );

    return () => {
      // Add clean-up logic here
    };
  });
</script>