Jump to content
Search Community

Tweening fill color

Dimotro test
Moderator Tag

Go to solution Solved by PointC,

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

I stumbled against this issue where i tried to tween a fill color of a path element with a given duration. 

 

But instead of smoothly tweening the color, it just changes it without tweening. Any ideas? I have checked out some topics with femilliar issues, but there the codepen just works with practically the same code.

 

Thanks in advance,

Dimotro

See the Pen ezgbKv by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Dimotro  :)

 

Welcome to the GreenSock forums. 

 

That's happening because you have your fill initially set to none in your CSS. So the tween didn't really having a starting point for the color fade in. You can fix that by setting your fill to transparent in your CSS and it should work just fine for you.

//switch this
.st5{fill:none;stroke:#E0B03B;stroke-miterlimit:10;}
// to this
.st5{fill:transparent;stroke:#E0B03B;stroke-miterlimit:10;}

Hopefully that helps.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Hi Dimotro  :)

 

Welcome to the GreenSock forums. 

 

That's happening because you have your fill initially set to none in your CSS. So the tween didn't really having a starting point for the color fade in. You can fix that by setting your fill to transparent in your CSS and it should work just fine for you.

//switch this
.st5{fill:none;stroke:#E0B03B;stroke-miterlimit:10;}
// to this
.st5{fill:transparent;stroke:#E0B03B;stroke-miterlimit:10;}

Hopefully that helps.

 

Happy tweening.

:)

 

Hi PointC,

I was quite sure i already tried giving all boxes a background color of the background beneath, so they actually had a color.

 

But i realized some plug-ins were not included and re-rolled the change back to none (after including the missing files)  :?

 

Makes sense to me now :)

 

Thanks for the quick response!

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.
×
×
  • Create New...