Why isn't my svg's fill color changing?

[pcdavis]

Hi,

I'm new to Greensock, so please excuse me if this is a dumb question. I used Illustrator to create two alternatives of the reddit logo: one with fill color gray, the other with fill color red. The morphSVG works correctly on the shape change, but the color is not changing from gray to red. Any help would be greatly appreciated.

 

NOTE: In the attached codepen, you have to click on the word "Devil" to start the animation.

 

Thanks,

Paul

See the Pen QmdMEq?editors=1010 by pcdavis (@pcdavis) on CodePen

Edited March 20, 2018 by pcdavis
forgot important instruction

[OSUblake]

The MorphSVGPlugin will only change the path data, the stuff inside the d attribute.

<path id="start" d="M129.06,46.05" />

 

 

To change the fill, you will need to set that yourself.

function morph (){
  TweenMax.to("#start", 1, {
    morphSVG:{shape:"#end",shapeIndex: 12}, 
    fill: "#ff0000",
    ease:Bounce.easeOut
  })
}

 

 

See the Pen zWNEBG by osublake (@osublake) on CodePen

 

[pcdavis]

Thank you!