laurentplenet Posted September 13, 2021 Share Posted September 13, 2021 Hello! I would like to have some help please about using GSAP & Morth, I'm trying to achieve some animations using GSAP & svg morphing to get something similar to https://bounds.agency/ (the menu reveal animation when click on the top right burger)... By now, all I get is : In my version, the blue shape it not revert like it should be (like the exemple)... Please I need help! See the Pen wveeywz by laurent-pnt (@laurent-pnt) on CodePen Link to comment Share on other sites More sharing options...
nico fonseca Posted September 13, 2021 Share Posted September 13, 2021 Hey @laurentplenet welcome to the forum! 💚 Here is a thread about how to achieve your goal. 3 Link to comment Share on other sites More sharing options...
laurentplenet Posted September 13, 2021 Author Share Posted September 13, 2021 Thanks/Merci @nico fonseca for your reply, In fact, thats not quite like your exemple, what Im trying to achieve is exactly this (in my codepen) : but considering that the blue part should be red (transparent)... Did you got any idea... ? Link to comment Share on other sites More sharing options...
mikel Posted September 13, 2021 Share Posted September 13, 2021 Hey Laurentplenet, Try a rectangle with side curves: outward / inward. Here e.g. bezier curves See the Pen JjJJZJq by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
Cassie Posted September 13, 2021 Share Posted September 13, 2021 If I understand the end goal correctly - Either you need to draw your paths so that the piece that's currently black is the shape being transformed or you need to look into masking with the blue shape. In terms of GSAP code -this is doing exactly what you're instructing it to do! Maybe this article will help if you decide to go the masking route?https://css-tricks.com/clipping-masking-css/ 3 Link to comment Share on other sites More sharing options...
laurentplenet Posted September 13, 2021 Author Share Posted September 13, 2021 @CassieThanks for your reply, clip path is not what I need because (take a look at https://bounds.agency/) there's a morphing shape for the menu reveal... What I need (but can't achieve) is my exactly like my codepen ( ) but, without the blue part (the blue part is supposed to act like a mask I could say...) in my codepen I've got the same result than bouds.agency but instead of seeing the website (my red part) I see the blue part... Am I clear enough ? ^^ Link to comment Share on other sites More sharing options...
mikel Posted September 13, 2021 Share Posted September 13, 2021 Does this example come close to what you want? See the Pen WNOOYaW?editors=0010 by mikeK (@mikeK) on CodePen Happy Tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 13, 2021 Share Posted September 13, 2021 1 hour ago, laurentplenet said: clip path is not what I need because (take a look at https://bounds.agency/) there's a morphing shape for the menu reveal You can morph shapes within a clip path. 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 13, 2021 Share Posted September 13, 2021 SVG image for ease of use - but you can use SVG to clip or mask HTML elements too! See the Pen ZEyyPLg by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution laurentplenet Posted September 13, 2021 Author Solution Share Posted September 13, 2021 Thanks for your help, I finally found out the solution for the « In » transition : See the Pen zYzzzMo by laurent-pnt (@laurent-pnt) on CodePen same for the « Out » transition : See the Pen XWggowE by laurent-pnt (@laurent-pnt) on CodePen I merged the both in one through my js and it works perfectly. 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