Jump to content
Search Community

Fading and Blending Radial Gradient ?

Lynx test
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"/>
        </radialGradient>
Link to comment
Share on other sites

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 ?

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({
    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/

 

:)

  • Like 2
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.
×
×
  • Create New...