Clip-path animation not working

[s-15]

The clip-path animation in the mentioned code pen is not working.

 

Can someone please point out what am I doing wrong? The other one with ellipse works just fine - https://codepen.io/sayaliga15/pen/abmpMdY

See the Pen PoGOvYr by sayaliga15 (@sayaliga15) on CodePen.

[PointC]

Hi @s-15 

 

Welcome to the forum. 

 

Looks like updating to the latest version of GSAP makes everything work correctly. (You were using a version that is several years old.)

See the Pen RwGjXZy by PointC (@PointC) on CodePen.

 

I also changed you syntax to the GSAP 3. Check out the migration guide for all the info.

Happy tweening.

 

[akapowl]

 

I just wanted to say the same along those lines of what @PointC just said.

 

Looks like maybe animating clip-path wasn't supported back then?

 

Even with the latest TweenMax it already works.

 

See the Pen 847a80c0fa2a5732c6333988097d2919 by akapowl (@akapowl) on CodePen.

[Shrug ¯\_(ツ)_/¯]

Hey folks, a bit off-topic but I’m just wondering has CSS clip-path support changed dramatically since my simple inquiry earlier in the year. I’ve seen numerous threads shortly after that mentioned one all the way up to this one over time. When clip-path polygon has been mentioned with no suggestion of SVG as an alternative for offering better support.

 

I’ve just been wondering given the responses I received in that thread verse the many responses I’ve since read in newer threads with no suggestion of SVG. Browser support to my knowledge has not really dramatically improved to become more inclusive since that original inquiry or am I in-fact mistaken?

[s-15]

@PointC @akapowl Thanks. Updating the version did make it work. Since clip-path ellipse worked with the older version I was expecting the polygon one to work. Seems like upgrading is the only option. 

[akapowl]

 

@Shrug ¯\_(ツ)_/¯

 

https://caniuse.com/?search=clip-path

 

Looks, like it is still very much partial all over the board, so your suggestion of using SVG for better support still seems legit ?

 

[PointC]

18 hours ago, Shrug ¯\_(ツ)_/¯ said:

no suggestion of SVG as an alternative for offering better support.

I think I've said so that so many times that I thought I could stop saying it. It should be branded in the forum scrolls of history. 

 

SVG is always my go-to for masks and clip-paths. I don't even bother checking support for anything else so if CSS clip-path suddenly gets broader support could somebody let me know? Thanks. 

[Bekah]

In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. 

 

For example, trying to animate from this:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 

to this:

clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%)

wasn't working, but when I changed the zero values to percentages, it worked perfectly.

 

// From
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)

// To
clip-path: polygon(-100% 0%, -100% 0%, -100% 100%, -100% 100%)

 

[cobalt]

On 4/14/2021 at 11:34 AM, Bekah said:

In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. 

 

For example, trying to animate from this:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 

to this:

clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%)

wasn't working, but when I changed the zero values to percentages, it worked perfectly.

 

// From
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)

// To
clip-path: polygon(-100% 0%, -100% 0%, -100% 100%, -100% 100%)

 

Fantastic answer ! I was facing an issue when animating with cilp path where i get no transition. It was because of my 0 values not having a unit, added a % sign to all my 0 values made it work !! Thank you !