Animated linearGradient in GSAP

[brotheryura]

Hey guys,
 
In my svg I use linearGradient to create animation for steps. But this not work in all browsers, so I want to use GSAP. I try find information about how to fill with animation, but no result. How can I do this with GSAP, with same duration and point (when finish first step begin next step )?

<linearGradient id="step1" x1="0" y1="0" x2="1" y2="0">
  <stop offset="40%" stop-opacity="1" stop-color="black">
    <animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="0.5s" begin="0s" />
  </stop>
  <stop offset="40%" stop-opacity="0" stop-color="black">
    <animate id="anim1" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="0.5s" begin="0s" />
  </stop>
</linearGradient>
<linearGradient id="step2" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-opacity="1" stop-color="black">
    <animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="0.5s" begin="anim1.end;" />
  </stop>
  <stop offset="0%" stop-opacity="0" stop-color="black">
    <animate id="anim2" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="0.5s" begin="anim1.end;" />
  </stop>
</linearGradient>
<linearGradient id="step3" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-opacity="1" stop-color="black">
    <animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="0.5s" begin="anim2.end;" />
  </stop>
  <stop offset="0%" stop-opacity="0" stop-color="black">
    <animate id="anim3" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="0.5s" begin="anim2.end;" />
  </stop>
</linearGradient>

See the Pen OprOPM by brotheryura (@brotheryura) on CodePen

[Jonathan]

Hello brotheryura and Welcome to the GreenSock Forum!

 

Here is an example that uses GSAP staggerTo() method to animate each <stop> elements stop-color CSS property

 

GSAP staggerTo() docs:

 

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

 

To animate a SVG linear gradient

 

See the Pen wJRpgX by jonathan (@jonathan) on CodePen

 

And here is it with a SVG radial gradient

 

See the Pen ZWKmrK by jonathan (@jonathan) on CodePen

 

Hope this helps! :

[flim]

I am trying to convert the syntax for GSAP v3 but hard to start as I don't know v2 syntax. Anyone could help?

[mvaneijgen]

@flim have you seen the migration guide?

 

[flim]

I tried to change the svg gradient with GSAP 3 but not success

See the Pen mdKOXKj by fredericklim (@fredericklim) on CodePen

 

I want to convert this CodePen to v3

See the Pen rxRGjg by jonathan (@jonathan) on CodePen

 

[mvaneijgen]

@flim something like this? 

See the Pen Vwdmxgm?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[flim]

Yes, your help is greatly appreciated. 😀