Deferent Color for each path in MorphSVG

[Hafid_Dev]

Hi guys,

I'm trying to give a color for each path. my issues is the color of the first path is applied to all the rest!

thanks very much.

site to see the animation: www.mwmtest.com/bio

JS:

// Signs Anim //

var tlBio = new TimelineMax({ repeat: -1, delay: 3, repeatDelay: 0.2, yoyo: true }),

  earth = document.getElementById('earth');

 

tlBio.to(earth, 2, { morphSVG: '#fire' }, '+=1').to(earth, 2, { morphSVG: '#water' }, '+=1').to(earth, 2, { morphSVG: '#space' }, '+=1').to(earth, 2, { morphSVG: '#wind' }, '+=1');

CSS:

#earth {

  fill: pink !important;

}

#fire {

  fill: yellow !important;

  visibility: hidden;

}

#water {

  fill: blue !important;

  visibility: hidden;

}

#wind {

  fill: green !important;

  visibility: hidden;

}

#space {

  fill: red !important;

  visibility: hidden;

}

See the Pen by bio (@bio) on CodePen

[mikel]

hey @Hafid_Dev,

 

Just change the color of the original shape.
In a separate tween or in the morph tween and its timing:

 

See the Pen eYYeGvw?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Hafid_Dev]

Hi Mikel, thank you so much I really appreciate.

it work perfect  thanks again.

[ZachSaucier]

Hey Hafid and thanks for being a Shockingly Green member!

 

A side note, you should avoid using !important as much as possible. It is a pain for future developers to override if need be. You can use other methods of proper specificity.