SVG Morphing for overlays

[Laurie]

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

[PointC]

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.

 

[Laurie]

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

[PointC]

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.