Laurie Posted May 13, 2021 Share Posted May 13, 2021 Good morning, I've been trying to create an effect for a long time, but I can't quite figure it out. I found so many topics here, and I'm so grateful for all the community. I saw this topic and this is actually what I'm trying to create with some waves shapes - made with the SVG Morph plugin ! It looks close to the effects I saw on CoDrops here, and I tried to do this with the plugin (but I failed, in my Codepen that I linked) Other inspiration for that kind of effect is : See the Pen vYyWdYK by artdev616 (@artdev616) on CodePen I'm not an export in SVG and have some limited knowledge about animations, but I really would like to know how to achieve this kind of effect to include this in my portfolio (to find a great job in front-end development!). Could someone help me on this topic? Thanks in advance, Laurie See the Pen BaWKoqE by LaurieVince (@LaurieVince) on CodePen See the Pen zYZqvJN by LaurieVince (@LaurieVince) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted May 13, 2021 Share Posted May 13, 2021 Hi @Laurie I'm not quite sure I follow the question. Everything seems to be morphing correctly. I think you'd probably want to hide your #step2 shape via your CSS. #step2 { visibility: hidden; } Is that what you meant? Happy tweening. 2 Link to comment Share on other sites More sharing options...
Laurie Posted May 14, 2021 Author Share Posted May 14, 2021 Thank you PointC ! I didn't notice I had to hide the second path in my SVG. Here's a new test : See the Pen dyvMZrm by LaurieVince (@LaurieVince) on CodePen I'm wondering how to create with SVG Morph the same effect linked my previous post. I tried to use transformOrigin but I failed. Thanks again, Laurie Link to comment Share on other sites More sharing options...
PointC Posted May 14, 2021 Share Posted May 14, 2021 Morphing comes down to asset prep more than anything else. If you want to use the morph plugin to get something similar to the first demo you posted you may need a few steps for your morph. We had a similar discussion a few years ago and I think this thread can help you. Some of the demos in the thread are still made with GSAP2, but a conversion to GSAP3 shouldn't be too difficult. Happy tweening. 3 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