raner

Infinite Multi-step fill change

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!

 

  • Like 1

Share this post


Link to post
Share on other sites

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

http://codepen.io/PointC/pen/EPJjVJ/

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 5

Share this post


Link to post
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

http://codepen.io/GreenSock/pen/wMZadP?editors=0010

 

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

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
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.