Blob Morph using morph svg

[sohe]

Hi everyone,

 

long time fan and first time poster, I had the following question regarding svg morph, when my two shapes are morphing you can see a harsh outline of the svg viewbox is there a way to avoid this?

 

I am also trying to trigger this animation on scroll using scrolltrigger - would anyone be kind of enough to advise me of best practices of using morph and scrolltrigger together in react?

 

Attached is a codepen demo.

 

Thank you for your help and amazing product.

See the Pen ZEReLZy by Scanton (@Scanton) on CodePen

[Rodrigo]

Hi @sohe and welcome to the GreenSock forums!

 

First, thank you for being a Club GreenSock member and supporting GSAP! 🥳

 

I believe that the issue lies on the size of your filter, perhaps make it the size of your SVG and give your SVG element a viewport so there is some mark of reference for that as well. Unfortunately SVG is not something I excell at so I couldn't give you a proper answer. @Cassie and @PointC on the other hand, are GSAP's resident SVG wizards and they could enlighten us regarding this particular subject.

 

Finally keep in mind that SVG filters are super expensive and in something as big as this you might run into performance issues. While this works fine on Chrome, on Firefox I can actually here the CPU fan going faster, which tells me that the CPU is under a bit of stress because of it, so tread carefully with SVG filters, especially in those sizes.

 

Happy Tweening!

[PointC]

You'll need to up your filter width/height. I used 150% but you can set it to your liking.

 

See the Pen 6ac6bf4810ef1c0892f473088e6c6a46 by PointC (@PointC) on CodePen

 

But as @Rodrigo mentioned, I'd recommend restraint with that kind of animation when it's so large.

 

Happy tweening.

 

[sohe]

Thank you so much for your help everyone! and thank you for giving me tips regarding performance issues. I am going to look into this again and will update.

 

Thanks once again