Jump to content
Search Community

Clip-path animation not working

s-15 test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

  • Solution

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.

 

  • Like 3
Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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. :D

 

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. ;)

  • Like 3
Link to comment
Share on other sites

  • 3 months later...

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%)

 

  • Like 14
  • Thanks 3
Link to comment
Share on other sites

  • 2 years later...
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 !

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...