[How can I write this code without duplicating another timeline?]

I have this Gsap timeline code where Each text box reveals an image. How can I rewrite this code in a proper way where I don't have to duplicate the timeline?

 

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".text-2", //text wrapper 3
    start: "top center ",
    end: "top top",
    scrub: 1,
    markers: true
  }
});
tl.fromTo(
  ".image-1",
  {
    clipPath: "polygon(0% 0%, 100% -50%, 100% 100%, 0% 100%)"
  },
  {
    clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
  }
);

let tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".text-3", //text wrapper 3
    start: "top center ",
    end: "top top",
    scrub: 1,
    markers: true
  }
});
tl2.fromTo(
  ".image-2",
  {
    clipPath: "polygon(0% 0%, 100% -50%, 100% 100%, 0% 100%)"
  },
  {
    clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
  }
);

This is the current outcome of the above code https://pixhance-d0ffb1.webflow.io/test