Jump to content
Search Community

Animating a gradient SVG along a path for feathered reveal.

Adam.shires test
Moderator Tag

Recommended Posts

Hey everyone,

So this has been proving to be trickier than first expected.

I've built out a loop, which uses drawSVG (and @Carl's amazing creative club tutorials :)) to create a "Tron" effect, which goes around a button on a client's site. My issue is that I'm trying to use a mask to create a feathered look to the line so that it is faded near the "tail" of the stroke.
so far I've got the loop working and looking good, but I can't figure out how I might be able to apply a gradient mask to loop around the path to create the effect. At first I thought I could just use a larger version of the mask, however that wouldn't create the effect I was after and would just result in one end of the whole loop being hidden and the other end visible with some faded opacity in-between.

 

I thought maybe it's possible to animate a gradient <rect> over the path? And then animate the gradient around the path to reveal the stroke underneath Which I think would look like this, but I'm struggling to get it to work:
 

image.png.5adb3d6f5db1079f806877cb1644f8c9.png

Any ideas?

Thanks in advance

 

Adam :)  

See the Pen MWXEroY by Geeza82 (@Geeza82) on CodePen

Link to comment
Share on other sites

I don't really have time to brainstorm a full solution for you (we really try to keep these forums focused on GSAP-specific questions), but you could consider thinking "outside the box" by basically taking your little mask gradient and swap in transparent for the black (so it goes from transparent -> white) and then plop it on top and animate it that way because the white part will blend in with your background. Basically an illusion. No masking at all. 

 

Aside from that, you could play with doing your original idea but have drawSVG draw the mask that leads your gradient chunk. Just throwing some ideas out there. I know @PointC is an expert with this type of stuff (he is the wizard behind https://motiontricks.com). Some articles that may help: 

https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/svg-masks-and-clippaths/

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Good luck!

  • Like 2
Link to comment
Share on other sites

Hi Adam,

 

Thanks for the mention. So nice to hear you are finding the courses helpful.

 

That's a cool animation you have already. 👍

 

I don't have time at the moment to experiment with this, but in addition to @GreenSock's great advice I'd recommend taking a step back perhaps and see if you can get the visual effect you want to work in just a straight line.  It might get a bit challenging with the rounded corners AND with the stroke length changing size. As the stroke gets smaller, less of it is going to be under the part of the gradient that fades it out. 

 

Unfortunately it's these types of experiments that can take some time to figure out. 

  • Like 1
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.
×
×
  • Create New...