Fading and Blending Radial Gradient ?

[Lynx 2 Likes (Newbie)]

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"/>
        </radialGradient>

[Diaco 1,948 Likes (Superhero)]

Hi Lynx 

 

pls check this topic : http://greensock.com/forums/topic/11828-back-with-gradient-changing-offset-value/

[Lynx 2 Likes (Newbie)]

Diaco,

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 ?

[Jonathan 5,176 Likes (Superhero)]

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({
    paused:true
});

// declare timeline instance for chaining
tl

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

// pre-record GSAP properties and values
.progress(1).progress(0)

// hammer time
.play();

How to use cycle in stagger tweens:

 

http://greensock.com/gsap-1-18-0

 

GSAP staggerTo() Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

 

[Diaco 1,948 Likes (Superhero)]

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