Jump to content
Search Community

Animating stop-color of linearGradient

shMattyP93 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

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.

 

 

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

  • 1 year later...

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