Kevin Powell - Community•2mo 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",
  },
});

14 Replies

ἔρως•2mo 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•2mo ago

Yep it has to have the same number of points

NickOP•2mo ago

does it? i swear they're the same 😄

ἔρως•2mo ago

i counted 19, and 20 on the 2nd

NickOP•2mo 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"),

ἔρως•2mo ago

🤔 now you made me doubt myself

NickOP•2mo ago

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

ἔρως•2mo 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•2mo ago

I just cannot get my head around it 😄

ἔρως•2mo ago

i am all out of ideas too

NickOP•2mo ago

thanks for trying anyway 🙂

MarkBoots•2mo 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

ἔρως•2mo ago

that makes sense

NickOP•2mo ago

Hi Mark, sorry, I didn't see this reply. Yeah that was the original answer I got on the gsap forums, but was then told that url to path is now possible, so who knows. Maybe you are right. I never got it solved, I just switched to using inset instead (and have now ditched clip-path for a Flip effect anyway!) Thanks though, appreciate the help!

Gaming

Programming

Animating clip path with gsap?

Did you find this page helpful?