Share Posted January 6, 2022 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 More sharing options...
Share Posted January 6, 2022 Heya! Have you seen this GUI?https://bennettfeely.com/clippy/ Link to comment Share on other sites More sharing options...
Author Share Posted January 6, 2022 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 More sharing options...
Share Posted January 6, 2022 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 More sharing options...
Author Share Posted January 6, 2022 Yes sorry, being very vague here... attached is a screen recording of the example. Screen Recording 2022-01-06 at 13.06.16.mp4 The blurry bit is what i'm after. Thanks, Jack Link to comment Share on other sites More sharing options...
Share Posted January 6, 2022 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 More sharing options...
Author Share Posted January 6, 2022 Wow okay thanks, that might be a better solution. I'll have a play around with some different value 🤔 1 Link to comment Share on other sites More sharing options...
Share Posted January 6, 2022 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 More sharing options...
Author Share Posted January 6, 2022 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! 👍 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 6, 2022 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 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