Olav Posted October 20, 2023 Share Posted October 20, 2023 Hi all, I'm trying to implement the following effect: https://imgur.com/26yCYUZ I've found it on a few website's such as: https://martingarrix.com https://tilt.digital https://lanouvelle.agency Included is a minimal demo on how the html/css/scrolltrigger should behave, although I have no idea on how to actually implement the svg / clip path effect. Does anyone have an idea in the right direction, or another codepen using the same concept? Thanks in advance! See the Pen jOdNeQM by olavgit (@olavgit) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 20, 2023 Share Posted October 20, 2023 Hi, The way to go in these cases is animating the clip-path property. You can check the cross or polygon types: https://bennettfeely.com/clippy/ Here are a couple of examples for implementing such animations with ScrollTrigger: See the Pen oNJRjNL by GreenSock (@GreenSock) on CodePen See the Pen eYbqrLZ by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Olav Posted October 21, 2023 Author Share Posted October 21, 2023 Hi @Rodrigo, Thanks for your examples! I can see this working with 'simple' shapes, but what if I need to use a logo or another svg which would be to complex to recreate in the css clip path property. Can we also handle this using the actual svg clipPath? And do you maybe have an example for that? Link to comment Share on other sites More sharing options...
Cassie Posted October 21, 2023 Share Posted October 21, 2023 From a GSAP perspective it's all the same really! See the Pen RwRORqB by cassie-codes (@cassie-codes) on CodePen I'd suggest taking a look at documentation on masking and clip paths if that's the bit you're a little confused by. Might be worth having a little play around without animation first - just try masking or clipping different things - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask Link to comment Share on other sites More sharing options...
Olav Posted October 21, 2023 Author Share Posted October 21, 2023 Thanks for the lead @Cassie, I ended up with this: See the Pen oNmNjRg by olavgit (@olavgit) on CodePen Achieves the same effect, but in a slightly hacky way I guess. Do you think this could be optimised? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 23, 2023 Share Posted October 23, 2023 Hi, Looks good to me. Honestly many times we trap ourselves into convoluted code trying to optimizing it or making it look better. Sometimes less is more and simpler is better 😃 Happy Tweening! Link to comment Share on other sites More sharing options...
Olav Posted October 26, 2023 Author Share Posted October 26, 2023 I couldn't help but try to figure out another way to make this work, and I'm nearly there. I just can't get my hands on the positioning of an svg clipPath, which isn't gsap related, but maybe someone here has the missing answer to my problem. I have created this very very minimal demo: See the Pen jOdbaZP by olavgit (@olavgit) on CodePen All I want is for my custom clipPath to be centered on the element it is clipping, just like the behaviour of the red circle. Is this possible? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 26, 2023 Share Posted October 26, 2023 Hi, Indeed that is not really a GSAP related questions and we try to keep these forums focused on GSAP questions. Maybe this thread can help: Good luck with your project. Happy Tweening! Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 27, 2023 Share Posted October 27, 2023 I think your SVG needs to be 1px by 1px (really weird I know) check this blog post https://davesmyth.com/clip-path-scaling 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