Jump to content
GreenSock

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

A little direction needed for animating an SVG gradient

Recommended Posts

Been hot minute since I worked with SVG gradients. What I want to do here is basically move the gradient around the rectangle without changing the x1 y1 x2 y2 values. Should I be using a plugin here or can I do this by just tweening the attributes of the svg? Thanks! 

See the Pen MWpmBdr by cwiens (@cwiens) on CodePen

Link to post
Share on other sites

Hi @curtiswiens :)

 

Sorry for the delay here. Looks like your thread was missed yesterday. 

 

I'm not 100% sure I follow the question. Are you saying the gradient in your second demo isn't to your liking? Or are you trying to have the gradient loop around the outside? In answer to your question, you shouldn't need any plugins. I would think just tweening the attributes should get you the desired result. Is there a reason you don't want to animate the x1/x2/y1/y2 attributes?

 

Happy tweening.

:)

 

  • Like 2
Link to post
Share on other sites

No worries thanks for the response, I had to jump on some other projects, back on this today.

Yes, essentially what I want to do is have the gradient loop around the outside. So should I be tweening x1 x2... attributes to make this happen?
I want the gradient to just appear to be looping around the rectangle. 

Link to post
Share on other sites
4 hours ago, PointC said:

Hi @curtiswiens :)

 

Sorry for the delay here. Looks like your thread was missed yesterday. 

 

I'm not 100% sure I follow the question. Are you saying the gradient in your second demo isn't to your liking? Or are you trying to have the gradient loop around the outside? In answer to your question, you shouldn't need any plugins. I would think just tweening the attributes should get you the desired result. Is there a reason you don't want to animate the x1/x2/y1/y2 attributes?

 

Happy tweening.

:)

 

@PointC

Just need to work out the math now. Any tips? I just threw some numbers in there for now. 

See the Pen ExWXwOy?editors=1111 by cwiens (@cwiens) on CodePen

Link to post
Share on other sites

Okay, I think I get it. :)

 

I made a couple demos for you. I used a wider path just so it's easier to see what's happening.

 

You could use gradientTransform like in your 2nd demo, but I'm not sure that gets the desired result and I have no idea about browser compatability on that one.

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

 

My preference would be to animate the x1/x2/y1/y2 attributes. I'd also use objectBoundingBox (default) for the gradientUnits. In this case I find it a bit easier to use values from 0 → 1 rather than keep track of absolute coordinates when using userSpaceOnUse.

 

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

 

Here's a fork of your pen with option 2.

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

 

Hopefully that helps.

:)

 

  • Like 7
  • Thanks 1
Link to post
Share on other sites

I was heading in the right direction but your examples clarified so much. Again appreciate the help!

  • Like 1
Link to post
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.

×