Jump to content
Search Community

Infinite Multi-step fill change

raner 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

Hi, I'm trying to set multiple color changes for the fill of an svg element, and have it repeat infinitely.  I've got it repeating infinitely for 2 colors, but I'm not sure how to add more than that and still have it repeat.  


What I have currently:

tl.to("#sky", 5, {fill: '#EDCEB9', repeat:-1, yoyo:true, ease: Power0.easeNone}, 0)


I know the yoyo will need to be gone, but what I'd like is to go from the original blue, to #edceb9 to #33474F and then back to the original blue and continue repeating. It would also be nice to control how long each color is up for and how quick to transition between colors. 


Thanks for any help!


See the Pen xZewXd by CoryDobson (@CoryDobson) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi raner  :),


Welcome to the forums. 


You can just put the sky portion of your animation inside a function so you can control it separately and then just add it to your master timeline. I didn't know how long you wanted each color, but you can just adjust it to your liking.

function skyAnim() {
var tl = new TimelineMax({repeat:-1});
tl.to("#sky", 3, {fill: '#EDCEB9'})
tl.to("#sky", 3, {fill: '#33474F'})
tl.to("#sky", 3, {fill: '#ABD9EF'})
return tl;

See the Pen EPJjVJ by PointC (@PointC) on CodePen


Hopefully that helps a bit.


Happy tweening and welcome aboard.


  • Like 5
Link to comment
Share on other sites

Great solution, Craig!


In addition if you want each color to stay solid for a bit longer you can use a position like so


var tl = new TimelineMax({repeat:-1});
tl.to("#sky", 2, {fill: '#EDCEB9'})
tl.to("#sky", 2, {fill: '#33474F'}, "+=1") //start 1 second later
tl.to("#sky", 2, {fill: '#ABD9EF'}, "+=1") //start 1 second later



position parameter: http://greensock.com/position-parameter

  • Like 5
Link to comment
Share on other sites

Thanks guys! I ended up solving it on my own just now before coming back to see if anyone had responded, and went basically along the same lines as above by creating a separate timeline for color changes, though the "+=1" is a nifty trick I wish I had implemented, as I accomplished the same effect but with a lot more lines of code to do it. Thanks again!

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