R.Sp anim

[Lillian.S 2 Likes (Newbie)]

Hi Friends,

Trying to animate the clip path, not the div and containing elements, but don't know how to implement it to gsap.

It is animating the whole div atm.

 

any help would be appreciated.

Best,

Lillian

See the Pen RwYxxbX?editors=0010 by lillianli (@lillianli) on CodePen

[GreenSock 18,577 Likes (Superhero)]

Hi @Lillian.S. GSAP can animate clipPath, but I don't think that's really what you want here because of the way you've got your CSS set up with the background-size set to cover and a set width/height. I suspect it'd be easier and more performant to wrap it in a container with a border-radius, animate the skewY of that, but counter-animate the skewY of the element in the opposite direction simultaneously. But you've gotta scale that inner <div> so that its edges extend far enough to cover the area you're exposing with the skew: 

See the Pen abaEgyy by GreenSock (@GreenSock) on CodePen

 

I hope that gets you going in the right direction. Happy tweening!

[Lillian.S 2 Likes (Newbie)]

It did a trick! Thank you very much. 🙂

[LenaEvans 4 Likes (Newbie)]

On 3/12/2023 at 2:22 AM, GreenSock said:

Hi @Lillian.S. GSAP can animate clipPath, but I don't think that's really what you want here because of the way you've got your CSS set up with the background-size set to cover and a set width/height. I suspect it'd be easier and more performant to wrap it in a container with a border-radius, animate the skewY of that, but counter-animate the skewY of the element in the opposite direction simultaneously. But you've gotta scale that inner <div> so that its edges extend far enough to cover the area you're exposing with the skew: 

 

 

 

I hope that gets you going in the right direction. Happy tweening!
 

Thanks for helping me as well, you made my day