<section class="section section--one">
  <svg class="section__svg">
    <defs>
      <clipPath id="clip1">
        <rect class="section__clip-rect"
              x="0%" y="0%" width="100%" height="100%" rx="0"
              transform="translate(0 0)"/>
      </clipPath>
    </defs>

    <text class="section__text"
          x="50%" y="50%"
          text-anchor="middle">
      Lorem ipsum, dolor sit amet
    </text>

    <rect class="section__shape-rect"
          width="100%" height="100%"
          clip-path="url(#clip1)"/>

    <text class="section__text--copy"
          x="50%" y="50%"
          text-anchor="middle"
          clip-path="url(#clip1)">
      Lorem ipsum, dolor sit amet
    </text>
  </svg>
</section>

<section class="section section--two">
  <svg class="section__svg">
    <defs>
      <clipPath id="clip2">
        <rect class="section__clip-rect"
              x="0%" y="0%" width="100%" height="100%" rx="0"
              transform="translate(0 0)"/>
      </clipPath>
    </defs>

    <text class="section__text"
          x="50%" y="50%"
          text-anchor="middle">
      Quia ipsam, sequi pariatur voluptatem!
    </text>

    <rect class="section__shape-rect"
          width="100%" height="100%"
          clip-path="url(#clip2)"/>

    <text class="section__text--copy"
          x="50%" y="50%"
          text-anchor="middle"
          clip-path="url(#clip2)">
      Quia ipsam, sequi pariatur voluptatem!
    </text>
  </svg>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 400vh;
  font-family: sans-serif;
  font-size: 1.5rem;
}

.section {
  position: relative;
  min-height: 70vh;
}

.section--one .section__shape-rect {
  fill: tomato;
}

.section--two .section__shape-rect {
  fill: royalblue;
}

.section__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section__text--copy {
  fill: #fff;
}

gsap.registerPlugin(ScrollTrigger);

const svg1 = document.querySelector(".section--one .section__svg");
const svg2 = document.querySelector(".section--two .section__svg");

/* ================ one ================ */

gsap
  .timeline({
    ease: "power1.in",
    scrollTrigger: {
      invalidateOnRefresh: true,
      trigger: ".section--one",
      start: "top center",
      end: "bottom center",
      // onEnter, onLeave, onEnterBack, and onLeaveBack
      // "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
      toggleActions: "play reverse play reverse",
      markers: true, // debug only!
      id: "one" // debug only!
    }
  })
  .set(".section--one .section__clip-rect", {
    attr: {
      width: function() { return svg1.clientWidth },
      height: function() { return svg1.clientHeight }
    }
  })
  .to(".section--one .section__clip-rect", {
    duration: 0.5,
    attr: {
      rx: 100,
      x: "50%",
      y: "50%",
      width: 200,
      height: 200,
      transform: "translate(-100 -100)"
    }
  });


/* ================ two ================ */

gsap
  .timeline({
    ease: "power1.in",
    scrollTrigger: {
      invalidateOnRefresh: true,
      trigger: ".section--two",
      start: "top center",
      end: "bottom center",
      toggleActions: "play reverse play reverse",
      markers: true, // debug only!
      id: "two" // debug only!
    }
  })
  .set(".section--two .section__clip-rect", {
    attr: {
      width: function() { return svg1.clientWidth },
      height: function() { return svg1.clientHeight }
    }
  })
  .to(".section--two .section__clip-rect", {
    duration: 0.5,
    attr: {
      rx: 100,
      x: "50%",
      y: "50%",
      width: 200,
      height: 200,
      transform: "translate(-100 -100)"
    }
  });