Aitor Posted December 22, 2022 Share Posted December 22, 2022 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> Grabación de pantalla 2022-12-22 a las 16.35.57.mov 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 More sharing options...
Solution mvaneijgen Posted December 22, 2022 Solution Share Posted December 22, 2022 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 4 Link to comment Share on other sites More sharing options...
Aitor Posted December 23, 2022 Author Share Posted December 23, 2022 Good catch! And good solution for the rem based value. I am very grateful. 🙏 Link to comment Share on other sites More sharing options...
akapowl Posted December 23, 2022 Share Posted December 23, 2022 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 4 Link to comment Share on other sites More sharing options...
Aitor Posted December 23, 2022 Author Share Posted December 23, 2022 Awesome! Thanks. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now