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>