Hemanta Posted August 21, 2020 Share Posted August 21, 2020 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 Link to comment Share on other sites More sharing options...
Richard1604 Posted August 21, 2020 Share Posted August 21, 2020 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 1 Link to comment Share on other sites More sharing options...
Hemanta Posted August 21, 2020 Author Share Posted August 21, 2020 Thanks Richard. Will take a look. Link to comment Share on other sites More sharing options...
mikel Posted August 21, 2020 Share Posted August 21, 2020 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Related threads: Link to comment Share on other sites More sharing options...
Richard1604 Posted August 21, 2020 Share Posted August 21, 2020 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 Link to comment Share on other sites More sharing options...
Hemanta Posted August 22, 2020 Author Share Posted August 22, 2020 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. Link to comment Share on other sites More sharing options...
Richard1604 Posted August 22, 2020 Share Posted August 22, 2020 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. 1 Link to comment Share on other sites More sharing options...
Hemanta Posted August 22, 2020 Author Share Posted August 22, 2020 Thanks Richard. 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