Jump to content


React using TweenMax cannot morph my svg (Using morphSVG)

Recommended Posts

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



  <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

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

Link to comment
Share on other sites

  • Vedadovsky changed the title to React using TweenMax cannot morph my svg (Using morphSVG)

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. 


  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.