Jump to content
Search Community

Animate clipping path

Aitor test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi, I'm trying to animate a clipping path circle, but only the radius. GSAP is animating all values of the style attribute.

 

<div
  id="flap"    
  style="clip-path: circle(10px at calc(100vw - 10rem) 10rem)">
</div>

 

So, I want to animate just 10px value. How can I do it? Thanks!

See the Pen NWBqNoW?editors=0011 by aitormendez (@aitormendez) on CodePen

Link to comment
Share on other sites

  • Solution

It seems like the browser is converting everything in calc() and thus is trowing off the calculations. I would try and do these calculations with Javascript, so that you can feed the browser and GSAP whole (real) numbers instead of having the browser having to do the calculate it with CSS.

 

See the Pen dyjopNG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Edit: Something like this could work 

See the Pen QWBbKvr?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
Link to comment
Share on other sites

Hey there, 

 

alternatively for a case like this, where you only need that one value to change (and if you don't need support for old browsers), it might be feasible to just set up your clip-path with a CSS variable in the place of the value you want to tween on, and then tween on that CSS variable instead.

See the Pen poZJENZ by akapowl (@akapowl) on CodePen


 

  • Like 4
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...