Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shouldaStayedInside

How do I animate two SVG shadows simultainously

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

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!

 

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.
×