Run SVG Shape Morph Animation on React.js without MorphSVG Plugin

[JasImpala]

Hi, Community, I am trying to achieve above effect without MorphSVG plugin on React.js.

Thanks to this community, I was able to get this working with JS on codepen. 

Though, I have some difficulty to move this effect to react.js codebase since handling dom event is bit different with JS.

I was trying to use ref to setAttribute, but since it was getting whole dom object itself, it didn't work well.

So tried with useState to pass this svg d, but no errors, but not working at all.

I think I didn't properly understand how to use GSAP svg animation with React.

 

Would anyone please share some thoughts based on my codepen?

Also, has anyone achieved similar effect using GSAP with React.js?

Regards!

See the Pen vYyWdYK?editors=1011 by artdev616 (@artdev616) on CodePen

[ZachSaucier]

10 hours ago, JasImpala said:

I was trying to use ref to setAttribute

That's the way to do it. gsap.set(myRef.current, { attr: { d: ... } });