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;
}