Jump to content


Cycling through SVG stop-colors

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 all it has been a while ?


So i have been experimenting with SVG's and i am trying to animate gradient colors but in a way so that the selected colors sequentially change and infinitely repeat themselves. The best example of what I am trying to do is in this example by OSUblake.


See the Pen 5a3c63e172d177f9c1b257ceba37378b by osublake (@osublake) on CodePen


As you can see the colors seamless cycle through and repeat.


As you can see in my example I simply changed the stop-color value to it's neighboring counter-part value hoping it would achieve a similar effect, however  this is not the case. So I wonder what is the best way i can tween the stop-colors values to reach the same effect.


Any help, tips or Advice is most appreciated, many thanks and it's good to be back ?



See the Pen MWgjxbB?editors=1010 by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

Hey bromel, fun request :) 


55 minutes ago, bromel said:

it's good to be back ?

Welcome back!


Using your method, I'd make use of a counter and GSAP's .invalidate() to do this. 


See the Pen XWrNxgg?editors=0010 by GreenSock (@GreenSock) on CodePen


The above will be much easier to do in the next version of GSAP! :D 


But it likely doesn't look like what you imagined because it's animating from one color directly to the next, which isn't exactly what Blake's pen is doing.


To fix this and make it as smooth as Blake's demo it'd be better to use translation instead of directly animating the color stop values. You can do that by doubling the color stops and animating their offsets like so: 


See the Pen qBWqJxY?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

3 hours ago, bromel said:

I feel like you have spoiled me ?

That's what we hope to do here at GSAP - do all the hard parts so that you guys can focus on the fun, exciting, and cool stuff :) 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

@ZachSaucier I was curious to know if it is possible to tween the colours instead of [Top-right to Bottom-left] have them move [Bottom-left to Top-right] as in the below example: 


See the Pen wvwjXOL by w9914420 (@w9914420) on CodePen


I have tried adding to the offset and has you can see only the blue gets shifted is it possible to play this in reverse?


Many thanks

Link to comment
Share on other sites

Sure you can, the JS that you have is 100% correct. You just didn't move the duplicated stop colors to go in the opposite direction :D 


Take a look at the SVG in the demo below:


See the Pen ZEzojQe?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 3 years later...

Regarding this line

 "offset": function(index, target) {


Why passing "index" to the function?

Link to comment
Share on other sites

The index value isn't actually used in that demo, but it has to be there as a placeholder for the function parameters. You need the target which is the 2nd parameter, so you've gotta put some variable name for the first one (otherwise how would you write the function?)


Here's a fork that's updated with GSAP 3 (modernized): 

See the Pen bGKgBpj?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Why I need to pass a dummy parameter to the function 1st parameter? Is that JS requirement?

Link to comment
Share on other sites

@flim those are the parameters you have access to when using functions in these properties. There even is a third one


Function-based values

Get incredibly dynamic animations by using a function for any value, and it will get called once for each targetthe first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for applying conditional logic or randomizing things (though GSAP has baked-in randomizing capabilities too...scroll down for that).

gsap.to(".class", {
    x: 100, //normal value
    y: function(index, target, targets) { //function-based value
        return index * 50;
    duration: 1


prop: (index, target, targets) => ... These are the order you get them in, so if you want the second one you'll need to make sure you also define the first one. These names are arbitrary you can also name them prop: (a, b, c,), but that will be less clear when reading the code. From the docs: https://greensock.com/docs/v3/GSAP/gsap.to()


Just FYI, it's better to start a new topic yourself and reference this topic. Right now everyone in this topic is getting an email and it is almost 3 years old.

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