Kevin Powell - Community•3d ago

Animating clip path with gsap?

Anyone know why animating this clip-path isn't working? It's just jumping from the initial to end state, and I'm not sure why :/ https://codepen.io/nwoodward/pen/bNbWJKK?editors=1010

<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",
  },
});

13 Replies

ἔρως•3d ago

i think the number of commands in the path makes a difference you have 19 commands and values, but the one in gsap has 20 use the 2nd path, change rx and ry to 0 and you have a square M 0 0 H 80 A 0 0 0 0 1 80 80 H 0 A 0 0 0 0 1 0 0 Z try this path as the initial path by the way, you might be able to remove the first command, as svg files start at 0,0 already moving to 0,0 doesn't do anything

clevermissfox•3d ago

Yep it has to have the same number of points

NickOP•3d ago

does it? i swear they're the same 😄

ἔρως•3d ago

i counted 19, and 20 on the 2nd

NickOP•3d ago

20 on this one yeah? gsap.to(".hero", { clipPath: path("M20 10 H80 A20 20 0 0 1 80 90 H20 A20 20 0 0 1 20 10 Z"),

ἔρως•3d ago

🤔 now you made me doubt myself

NickOP•3d ago

i was hoping you were right / i couldn't count 😄 (there's still a chance)

ἔρως•3d ago

yeah, you're right, i was wrong i miscounted the 2nd path and you already have the same commands too, with different arguments

NickOP•3d ago

I just cannot get my head around it 😄

ἔρως•3d ago

i am all out of ideas too

NickOP•3d ago

thanks for trying anyway 🙂

MarkBoots•2d ago

i think it is because you're not animating the same clippath value type. in CSS it is a url (pointing to a svg ) and you're animating it with GSAP to an actual path . So a smooth transition is not possible. it will jump from url to path I can not test it myself right now, but try and see if it works when you put the actuall clippath in the css instead of using the url

ἔρως•2d ago

that makes sense

Gaming

Programming

Animating clip path with gsap?

Did you find this page helpful?