Jump to content
GreenSock

jackkemm

Image reveal effect with polygon clip-paths

Recommended Posts

Hi there,

 

I am hoping someone could offer some advice.

 

I am creating an image reveal effect using polygon clip-paths but am running into an issue with the end path.

 

The idea behind it is a green shape slides over to reveal a first blury (zoomed in version of the main image) image, then this blurry image uses a diagonal clip-path from the bottom left and sweeps to the top right to reveal main image behind.

 

I guess my question is about the clip-path, as I can't for the life of me work out the intended values to essentially clip diagonally from the bottom left to the top right to hide the blurry image and show the main image.

 

So the blurry image would stay in place, but be clipped from the bottom left gradually hiding it to the top right.

 

Any help would be much appreciated, and any tips on how this could be improved would be well recieved too!

 

Thanks in advance.

 

Jack

See the Pen eYGKxde by jackkemm (@jackkemm) on CodePen

Link to comment
Share on other sites

Hey Cassie,

 

Thanks for the reply!

 

Yes I have indeed. That got me started, but it's more how it moves from bottom left to top right. As if the container is shrinking.

 

Don't know wether you've seen that sort of animation before? Like having a fixed background but not lol.

 

Thanks,

 

Jack

Link to comment
Share on other sites

32 minutes ago, jackkemm said:

Don't know wether you've seen that sort of animation before? Like having a fixed background but not lol.

Have you got an example? This isn't giving me much to go on 😂

 

I don't really have much advice other than use the tool to find the values you need and then pop it into your codepen.

Link to comment
Share on other sites

Well, you've got the animation bit working, so values wise -  I'd recommend getting out a bit of paper, drawing a grid and working out what values you need.

Either that or use SVG? it's a little easier to handle as you can just animate an element inside the mask wherever you want it to go

See the Pen MWEXNoa?editors=1010 by GreenSock (@GreenSock) on CodePen

 



 

Link to comment
Share on other sites

Wow okay thanks, that might be a better solution.

 

I'll have a play around with some different value 🤔

  • Like 1
Link to comment
Share on other sites

You'll be needing negative values and values over 100% so that the clip path is larger than the canvas.

So that clippy tool might not be hugely helpful unfortunately. Good luck!

Link to comment
Share on other sites

I thought that might be the case, naturally to get it 'off canvas'.

 

Thanks for stearing me in the right direction.

 

I'll make sure to post when i've cracked it! 👍

  • Like 1
Link to comment
Share on other sites

Hey Cassie,

 

Managed to get it working in the end (codepen attached has been updated). Just played around with what I was clipping and finally got the effect I was after.

 

Had to adjust the polygon values but stuck with just using a clip path.

 

Thanks again for your help!

 

Jack

  • Like 1
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.
×