React using TweenMax cannot morph my svg (Using morphSVG)

[Vedadovsky 0 Likes (Newbie)]

So what I want to do is morph my svg so it produces an animation, but when i use morphSVG function in TweenMax, it doesn't work. When I try other simple animations, let's say for instance x:"+=10", y:"+=40" (moving up and down), it works completely fine.

Animation code:

    

   

TweenMax.to('#tent1', 2, {    morphSVG:"M405.637,642.917c0,0,2.25,1.084,4.5,2.583c38.333,21.834,61,53.5,60.75,80.167 c-0.228,2.635-0.039,5.346-2.25,24.833c-2.681,23.632-0.761,7.514-7.75,64.25c-0.708,5.752-1.671,13.099-2.25,18.75 c-1.01,9.87-5.218,31.077-7.968,45.077c-0.886,4.509-4.407,23.298-22.538,29.423h94.539c-0.658-0.31-2.571-1.919-3.22-2.25 c-1.964-1.018-1.257-5.26-1.562-7.375c-0.5-3.459,3.336-64.208,3.333-63.208c0.025-11.676,1.039-25.425,1.064-37.286 c0.264-53.723,1.586-59.657-1.473-75.706c-2.789-14.937-8.465-29.403-15.792-42.254c-11.888-21.014-29.788-40.621-53.315-55.898 c-14.672-9.366-29.065-15.318-44.653-19.242c-10.883-2.706-20.402,2.722-21.619,12.828 C384.138,628.345,395.996,637.312,405.637,642.917z",
              repeat: -1,
              yoyo: true,
                ease: Power1.easeInOut
            });

SVG:

 

  <g id="squidBack">
        <path id="tent1" fill="#005FB8" d="M432.199,644.237c0,0,1.444,0.534,4.153,1.536c36.663,17.052,47.713,53.916,38.136,80.266
            c-0.885,2.635,0.001,0.119-7.069,19.606c-8.573,23.632-4.604,12.438-24.73,69.645c-2.028,5.766-4.04,11.485-6.028,17.137
            c-3.471,9.87-13.107,34.064-11.154,62.421c0.298,4.38,0.888,8.789,1.758,13.152h82.876c-0.581-0.31-1.167-0.612-1.733-0.943
            c-1.711-1.018-3.317-2.133-4.805-3.312c-20.484-16.15-0.4-71.467-0.652-70.467c2.937-11.676,5.919-23.535,8.903-35.396
            c13.658-53.723,16.46-59.657,17.403-75.706c0.936-14.937-1.134-29.403-5.257-42.254c-6.648-21.014-19.66-40.621-39.378-55.898
            c-12.336-9.366-25.246-15.318-39.856-19.242c-10.208-2.706-21.08,2.722-24.817,12.828
            C415.977,628.345,421.462,640.267,432.199,644.237z"/>
        
    </g>

If anyone knows how to solve this problem / give alternative with morphSVG it would be great. Thanks in advance

[GreenSock 16,307 Likes (Superhero)]

Hi @Vedadovsky. It's super difficult to troubleshoot blind - got a minimal demo we could look at, like in CodePen? My guess is that you never actually loaded MorphSVGPlugin or you didn't register it. I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin and shouldn't be using it unless you're using a trial version on CodePen/CodeSandbox. 

 

Once we see a minimal demo, I'm sure we'll be able to offer better advice. 

 

[PointC 13,776 Likes (Superhero)]

Path data looks fine and it clearly works correctly as seen in this demo.

 

See the Pen 920f23b493b302b6a111a733ce12e559 by PointC (@PointC) on CodePen

 

Definitely look at joining Club GreenSock so you can use MorphSVG in the wild. 

 

Happy tweening.