Jump to content
GreenSock

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

Cycling through SVG stop-colors

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 😊

 

Bromel

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

Share this post


Link to post
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 3
  • Thanks 1

Share this post


Link to post
Share on other sites

@ZachSaucier This is Awesome!!!

 

I feel like you have spoiled me 🤗

 

Many thanks

  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×