Jump to content
GreenSock

brotheryura

Animated linearGradient in GSAP

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

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

Link to comment
Share on other sites

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! :

  • Like 4
Link to comment
Share on other sites

  • 5 years later...

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

Link to comment
Share on other sites

@flim have you seen the migration guide?

 

  • Like 3
Link to comment
Share on other sites

Yes, your help is greatly appreciated. 😀

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×