Jump to content
GreenSock

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

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

Hi,

 

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

</linearGradient>

 

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

 

 

Share this post


Link to post
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"/>
        </linearGradient>

 

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

Share this post


Link to post
Share on other sites

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

 

  • Like 5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Why's that a problem?

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

It's much simpler using css.

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

 

  • Like 4

Share this post


Link to post
Share on other sites

THank you!

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×