MENU WITH A CURVE EFFECT

[Hemanta]

Hey folks,

 

If you go to the following website and click on the menu, then you will see that the menu is revealed with a nice curve effect.

https://dddhotel.jp/en/

Can this curve effect be achieved using GSAP? If yes, then can you help me with a demo? 

 

Thanks,

Hemanta 

[Richard1604]

Hi Hemanta,

here is a youtube video that walks through a similar process using anime.js

Most of the work involves creating the svg so you might find it helpful from that point of view.

After that I think that you can put together a tween using the MorphSVGPlugin

https://www.youtube.com/watch?v=LKwXoaFwYFk

 

Richard

[Hemanta]

Thanks Richard. Will take a look.

[mikel]

Hey @Hemanta,

 

There are several options.

Here is a mix of x-transform and morph.
Alternatively you can morph several shapes one after the other.
Pay attention to clipPathUnits = "objectBoundingBox" and

that the coordinates are in the range of [0, 1] - good info on this from Sara Soueidan here.

 

See the Pen OJNbgjz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[ZachSaucier]

Related threads:

 

[Richard1604]

just familiarising myself with the SVG Q command and found this useful link

https://blogs.sitepointstatic.com/examples/tech/svg-curves/quadratic-curve.html

where you can experiment with the parameter values in a GUI.

I thought it might be helpful to others too so that you can see how the quadratic curve is defined by the coordinates

 

 

[Hemanta]

Thanks all for the resources. I don't have a good understanding of SVG. So, I guess I have to learn SVG properly first before I attempt to do the animation.

[Richard1604]

Hi Hemanta,

try this W3 Schools tutorial

https://www.w3schools.com/graphics/svg_intro.asp

it's a very gentle intro and is a very good place to start - then try moving on to building your own simple paths.

 

 

[Hemanta]

Thanks Richard.