Jump to content

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

Animating stop-color of linearGradient

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



Is there a way I can animate the stop color values of a gradient using TweenMax, or in a timeline?


<linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="linearGradient-1">
                        <stop offset="1.281415e-03" style="stop-color:#FFDD15"/>
                        <stop offset="0.5" style="stop-color:#EE4036"/>
                        <stop offset="1" style="stop-color:#9E1F63"/>



I would like to animate those three colors to three new ones.



Link to comment
Share on other sites

given this gradient


<linearGradient id="MyGradient">
            <stop offset="1.281415e-03" stop-color="#FFDD15" id="stop1"/>
            <stop offset="0.5" stop-color="#EE4036" id="stop2"/>
             <stop offset="1" stop-color="#9E1F63" id="stop3"/>


you can tween those attributes using the attr plugin


TweenMax.to("#stop1", 2, {attr:{"stop-color":"red"}});
TweenMax.to("#stop2", 2, {attr:{"stop-color":"white"}});
TweenMax.to("#stop3", 2, {attr:{"stop-color":"blue"}});


we warn not to tween stuff in <defs> so its worth testing. In the future please consider providing a demo as it makes things easier to test.

  • Like 3
Link to comment
Share on other sites

Didn't we just cover this in your other thread? ;)


  • Like 5
Link to comment
Share on other sites

  • 1 year later...

Hi Guys,

if I remove the inline style and change stop-color to attribute the above from Carl doesn't work for me, the gradient becomes all black

See the Pen XWdKwqQ by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen


Could you please advise

Thank you

Link to comment
Share on other sites

Why's that a problem?

Link to comment
Share on other sites

switch this

    <stop offset="0" stop-color:"#2B1028"/>
    <stop id="red_stop" offset:"1" stop-color:"#8C3A1D"/>


to this:

    <stop offset="0" stop-color="#2B1028"/>
    <stop id="red_stop" offset="1" stop-color="#8C3A1D"/>


  • Like 4
Link to comment
Share on other sites

You don't need to use attributes to animate the color, but attributes are in the form of stop-color=""

  • Like 1
Link to comment
Share on other sites

It's much simpler using css.

gsap.to("#red_stop", {
  stopColor: "#00ff00"


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