Animating linear fill in an SVG

[Tom Roberts]

Hi Greensockers!

Can you help? I have an animation where I would like to make a gradient fill 'flow', basically make the colours top and bottom swop.

I have looked on the forums and a lot of the suggestions are really old and didn't reference GSAP3.

Do I need an additional plugin to achieve the effect (MorphSVG)?

Thanks

 

See the Pen ZEWgzgp by neilb1969 (@neilb1969) on CodePen

[ZachSaucier]

Hey Tom.

 

22 minutes ago, Tom Roberts said:

I would like to make a gradient fill 'flow'

"Flow" is quite an ambiguous term.

 

22 minutes ago, Tom Roberts said:

make the colours top and bottom swop

You can animate the stop colors however you'd like to. For example:

See the Pen WNwVNXx?editors=1010 by GreenSock (@GreenSock) on CodePen

[PointC]

Usually animating gradients involves animating the stop color and/or offset. Here's a couple old examples that I just updated to GSAP 3. The first animates the stopColor and the second shows animating the offset.

 

See the Pen bMxqYR by PointC (@PointC) on CodePen

See the Pen xJOrWG by PointC (@PointC) on CodePen

 

Hopefully these help. Happy tweening.

[OSUblake]

Using some gsap utils to animate between gradients with different numbers of color stops.

 

See the Pen 6b1374dbfd8c95e91594faf395f75846 by osublake (@osublake) on CodePen

 

 

[PointC]

Fancy. 🎩