Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hafid_Dev

Deferent Color for each path in MorphSVG

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi Mikel, thank you so much I really appreciate.

it work perfect :) thanks again.

Link to comment
Share on other sites

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.

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

×