ScrollTrigger - Stack panel hold until animation is done

Question

I'm trying to build a stack panel navigation, but in the first panel I need to do an animation before the second panel appears. I know this is very vague, but please checkout this codepen:

https://codepen.io/tdiezel/pen/QWoRYWW

const blStacks = gsap.utils.toArray(".panels");
blStacks.forEach((box) => {
  ScrollTrigger.create({
    trigger: box,
    start: "bottom 100%",
    end: "bottom 0",
    scrub: true,
    pin: true,
    pinSpacing: false,
  });
});

gsap.to(".box", {
  width: "100%",
  scrollTrigger: {
    trigger: ".panels-hero",
    start: "bottom 100%",
    end: "bottom 0",
    markers: true,
    scrub: true,
    pin: true,
  },
});

I basically want the pin to hold until the transparent box reach 100% width. Any ideas ?