Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
laurentplenet

Menu reveal GSAP

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

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) : 

See the Pen wveeywz by laurent-pnt (@laurent-pnt) on CodePen

 but considering that the blue part should be red (transparent)... Did you got any idea... ?

Link to comment
Share on other sites

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

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 ( 

See the Pen wveeywz by laurent-pnt (@laurent-pnt) on 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

 

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.

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