Jump to content
Search Community

Menu reveal GSAP

laurentplenet test
Moderator Tag

Go to solution Solved by laurentplenet,

Recommended Posts

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

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/

  • Like 3
Link to comment
Share on other sites

@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

  • Solution

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

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