Animating clip path with gsap?

<svg width="0" height="0">
  <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
    <path d="M0 0 H100 A0 0 0 0 1 100 100 H0 A0 0 0 0 1 0 0 Z"></path>
  </clipPath>
</svg>

gsap.to(".hero", {
  clipPath: `path("M20 10 H80 A20 20 0 0 1 80 90 H20 A20 20 0 0 1 20 10 Z")`,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "1px top",
    end: "bottom top",
    pin: true,
    markers: true,
    toggleActions: "play reverse play reverse",
  },
});

<svg width="0" height="0">
  <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
    <path d="M0 0 H100 A0 0 0 0 1 100 100 H0 A0 0 0 0 1 0 0 Z"></path>
  </clipPath>
</svg>

gsap.to(".hero", {
  clipPath: `path("M20 10 H80 A20 20 0 0 1 80 90 H20 A20 20 0 0 1 20 10 Z")`,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "1px top",
    end: "bottom top",
    pin: true,
    markers: true,
    toggleActions: "play reverse play reverse",
  },
});