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>