How do I animate two SVG shadows simultainously

[shouldaStayedInside]

Hello,

 

I have implemented an animation with text shadows for my text using CSS, and would like to achieve the same effect on my SVG file. Basically what I need are two shadows with different colors moving away from eachother. I tried using SVG animations but then I found out about GSAP, which seems like a very good thing to know how to work with. But since I'm new to all of this I'm giving up after trying about 10 different things. You can pretty much see all the things I've tried commented out. Sorry if it's too much text but I wanted to make sure there'd be enough context. 

 

Thanks in advance.

See the Pen NZwgxo by arbershallcode (@arbershallcode) on CodePen

[PointC]

I'm not 100% sure what you're trying to do, but to animate filters like that you'll need to use the attr plugin. (auto loaded with TweenMax)

 

Here's a really basic example:

 

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

 

Hopefully that helps. Happy tweening.

[mikel]

Hi @shouldaStayedInside,

 

Welcome to the GreenSock Forum.

 

If you do not need a blur effect, this can also be a solution.

 

See the Pen GbOORx by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[shouldaStayedInside]

20 hours ago, PointC said:

I'm not 100% sure what you're trying to do, but to animate filters like that you'll need to use the attr plugin. (auto loaded with TweenMax)

 

Here's a really basic example:

 

 

 

 

Hopefully that helps. Happy tweening.

Well basically I want the exact same effect that I have for My Name on the SVG files. What you've done is more or less that. 

20 hours ago, mikel said:

Hi @shouldaStayedInside,

 

Welcome to the GreenSock Forum.

 

If you do not need a blur effect, this can also be a solution.

 

 

 

 

Happy tweening ...

Mikel

 

 

But this solution appears to take care of all of my effects using GSAP, so I think I'll try this first.

 

Thanks a lot for your fast responses!