Jump to content


Fading and Blending Radial Gradient ?

Moderator Tag

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 have a SVG file which has a linear gradient, I want to animate the gradient fading in, this is strictly for experimentation at this point, but can one group some of the colors from a radial gradient while leaving the other colors; the result would be a fading in while blending with the other color that remains static ?

<radialGradient id="SVGID_1_" cx="160.6982" cy="160.3057" r="129.5064" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#00AEEF"/>
            <stop  offset="0.0608" style="stop-color:#00A2E4"/>
            <stop  offset="0.1969" style="stop-color:#008DCF"/>
            <stop  offset="0.3346" style="stop-color:#3D78BD"/>
            <stop  offset="0.4714" style="stop-color:#5D67B0"/>
            <stop  offset="0.607" style="stop-color:#6E58A5"/>
            <stop  offset="0.741" style="stop-color:#784B9E"/>
            <stop  offset="0.8728" style="stop-color:#7D429A"/>
            <stop  offset="1" style="stop-color:#7F3F98"/>
Link to comment
Share on other sites


var S = document.getElementById("grad").getElementsByTagName("stop") , SL = S.length;


You can get the Id & tag name in one variable with a dot separating the two, interesting, then I assume you are creating a variable SL ?

Link to comment
Share on other sites

Hello Lynx,


To add to Diaco's great solution in his link ;)


You can also animate a radial or any gradient by using a staggerTo() tween and the special property cycle


See the Pen ZWKmrK by jonathan (@jonathan) on CodePen


I just used any shape for the radial gradient shape since i didn't know anything else of your SVG markup.

// create new timeline in a paused state
var tl = new TimelineMax({

// declare timeline instance for chaining

// animate the radial gradient
.staggerTo("#SVGID_1_ stop", 1, {
      stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888']
}, 0.1, 0)

// pre-record GSAP properties and values

// hammer time

How to use cycle in stagger tweens:




GSAP staggerTo() Docs:





  • Like 2
Link to comment
Share on other sites

yep , today Jonathan 's solution is really handy and cool with stagger/cycle method ( v1.18.2 ) :)

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