GSAP unable to animate clip-path: inset(...

[bradwoods.io]

Does anyone know if I'm implementing this incorrectly or if not, a workaround for this? Sandbox: 

See the Pen QWPgjMY by bradwoods (@bradwoods) on CodePen

[GreenSock]

Is the same issue as in your other post - answer is here: 

 

[bradwoods.io]

Thanks for the response! Changing to the same amount of units seems to solve one problem but reveals another. The border radius is changing when it shouldn't be. I've altered the sandbox with the updated values.

[GreenSock]

That's because the browser's getComputedStyle() doesn't return the calc() data properly. So when GSAP gets the starting (from) value, the browser gives it a value with no calc(), and then the end string has calc() in it with multiple numbers. It's the same issue with your other demos (mis-matched data/quantities). There are two solutions: 

 

1) Use CSS variables:

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

 

2) Use a normal .fromTo() tween so that GSAP understands what you're trying to do and can use the raw starting value instead of a computed one from the browser: 

See the Pen wvZeWXQ?editors=0110 by GreenSock (@GreenSock) on CodePen

 

[bradwoods.io]

Thanks for the detailed answer!

[bradwoods.io]

My understanding of timelines might be wrong. But in the below sandbox. I'm setting a clip-path value then animating it. The border-radius value doesn't change. But in the end result it is animating. Would you know why?

See the Pen mdgpaeE?editors=0010 by bradwoods (@bradwoods) on CodePen

[GreenSock]

This is the pretty much the same issue (and answer) as your other posts. Let me try to explain the process...

 

When you do a normal tween, like a .to() or .from(), it must get the CURRENT value from the browser using window.getComputedStyle(element). You're using calc() values which get calculated and the result gets returned by the browser. So, for example: 

// you set: 
`inset(0% 0% 0% calc(0% - 0px) round 200px)`

// browser returns via window.getComputedStyle():
`inset(0% round 200px)`

So  now GSAP has to figure out how to interpolate between those strings which have different amounts of numbers (thus it isn't really feasible). That is what's biting you. 

 

If, however, you use a .fromTo() tween where you're feeding in BOTH the start and the end, GSAP can discern what you're asking it to discern - it doesn't have to pull the current style from window.getComputedStyle() which is why it works: 

See the Pen ExJorrv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Since you've got the same amount of numbers in the start/end strings, they'll interpolate cleanly. 

 

We've already given you several solutions in the past - use the fromTo() or you can use CSS variables instead, and animate those with GSAP. 

[bradwoods.io]

I've simplified the timeline to make it easier to show the problem I'm having. The actual timeline I'm making is more complex. I don't think it's as easy as just using `fromTo`. The required timeline needs to set calculated values at the beginning, then, at some point in the timeline (not at the beginning of it) they need to change. It looks like CSS variables will do it though.

[GreenSock]

You don't have to use CSS variables. Here's another way you can just use a normal object as a proxy: 

See the Pen PogELWo?editors=0010 by GreenSock (@GreenSock) on CodePen