popland Posted March 7, 2021 Share Posted March 7, 2021 I have a basic image reveal with clip path, but it's quiete boring, the clip path is a square (4 points) that starts "compressed" in the middle and it animates the corners torward the edge of the container/image (if you see the demo, you probably better understand than my explanation) as i said the animation is quiete basic, so i was thinking to improve (at least for my taste) having the bottom points starting its animation a little earlier and the top ones to catch up later but it looks i can't decouple top and bottom corners in clip-path, at least i can't find a solution! any idea? See the Pen OJboeLY by lenna-the-vuer (@lenna-the-vuer) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted March 7, 2021 Share Posted March 7, 2021 Couldn't you just use two tweens on a timeline? Something like this. See the Pen 91afd010f49287d20ade4a527b136937 by PointC (@PointC) on CodePen Is that what you meant? Happy tweening. 4 Link to comment Share on other sites More sharing options...
popland Posted March 7, 2021 Author Share Posted March 7, 2021 thank you i tried chaining tweens on a timeline, but i wasnt thinking like in your example (that approximate really well what i was tinking), my approach was animating bottom corners in a tween and top ones in the other, but i realized that every clip path amimation should have all four corners. So, i guess your solution could be thr best i can do, even if it is tied to position instead than time thank you 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