Jump to content


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

Recommended Posts


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.




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

Edited by pcdavis
forgot important instruction
Link to comment
Share on other sites

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",



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


  • Like 6
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.