Jump to content
Search Community

Asymmetrical clip path animation

popland test
Moderator Tag

Recommended Posts

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

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

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...