singlexyz Posted January 24, 2021 Share Posted January 24, 2021 css clip-path property has multiple values in a declaration. .el { clip-path: inset(10% 20%); } like above, how to animate 10%part and 20% part in different ease or duration ? just like 10% use 1s duration, and 20% use 2s. I could and a parent element, then animate with child same time. or animate two object then update the clip-path. but has any function built-in can do that? See the Pen WNGBVzE by nayuxuohz (@nayuxuohz) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 24, 2021 Share Posted January 24, 2021 Hey @singlexyz, I would use SVG clipPath and then two corresponding tweens See the Pen OJReJbq by mikeK (@mikeK) on CodePen More info: Clipping in CSS and SVG, research on browser support levels for CSS clipping and masking Happy tweening ... Mikel 3 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