Jump to content
GreenSock

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

How to animate a SVG path but only the stroke color?

Go to solution Solved by PointC,

Recommended Posts

So I'm creating a path levels and I wanted to animate the SVG path and I added a class per level (e.g. .path-1 to .path-14 ) and these paths has an active state so whenever a user completed a level it will animate to the next level. 

And I only wanted to change the stroke color and not the dasharray of the path. 
Is it possible? I've tried to use a <mask> but unfortunately I'm not able to make it work. 

See the Pen ZELzQYo by leonardpbdigital (@leonardpbdigital) on CodePen

Link to post
Share on other sites

Hi,

 

I know two ways of doing that.

 

The first one is to use the attr: {} wrapper in the config object to tween the value directly on the SVG stroke attribute.

 

The second one is to use a class to set the stroke color of the path and use the CSS Plugin to change that color.

 

In this sample the path in the left uses the CSS Plugin to update the color via the element's style and the path in the right uses the stroke attribute directly:

See the Pen KKaPVrx?editors=1010 by rhernando (@rhernando) on CodePen

Keep in mind that the path SVG element can have a style attribute applied to which is what the CSS Plugin uses to update the color as well as the stroke presentational attribute.

 

Happy Tweening!!!

Link to post
Share on other sites

Thank you for your reply. 

 

But I want to retain the dash on my path and animate it going forward to the next level. Would it be possible?

Unfortunately drawSVG doesn't work in this case I believe based on what I've found in the other topics here. 

Link to post
Share on other sites

Mhh... I'm not sure I follow what you're trying to do, but you can tween the stroke color regardless if the path is dashed or not. I updated my sample to reflect that.

 

If you want to tween the color and then use Draw SVG to animate the path drawing, I'd recommend creating two identical paths one dashed that is visible and the other continuous that is revealed when the Draw SVG plugin works it's magic.

 

@PointC is our SVG wizard around here, maybe He has a trick for this type of stuff.

 

Happy Tweening!!!

  • Like 5
Link to post
Share on other sites

This is how I do it using CSS and jQuery https://share.getcloudapp.com/YEuRqlP7

Basically I just play around with the stroke-dasharray.
It's easy when they have the same color but if there's a base color like the above then it's more complicated I think. 😅

I want to achieve the same flow like my link above. 

 

Thank you very much

Link to post
Share on other sites

 

As @Rodrigo suggested above, I would also say have look through @PointC's MotionTricks learning site. He has various tutorials that should help you and even one on Dashed Line Animation. Many of the tutorials and examples will also show how to use drawSVG with masks etc., to help you accomplosh various outcomes.

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

I'm a little late to the party, but I think the link to my dashed lines tutorial should help. Though I'm not quite following the desired outcome here. Are the dashed lines changing stroke color? I couldn't quite tell from the video, but it almost looks like a solid stroke fades in and then the dasharray changes. 

 

Maybe I'm just confused.

  • Like 2
Link to post
Share on other sites

Sorry about the confusion.
Maybe I just didn't explain it that well because English is not my native language. 

So this is basically what I wanted to achieve:
Path – Figma - Google Chrome 2021-03-23 at 9.50.05 PM

As you can see the orange path is the active state that I want to animate.
So it will sit on top of the dark path. When user clicks on the start button it will then go to the "What We're Building"  element.
I hope that makes sense.

Thank you

 

Link to post
Share on other sites

Okay I think I understand. You want the dashed path to change color as the user progresses through the stop points, right? I think I'd create my base dashed path and a duplicate in a different color. The duplicate could then be masked and revealed with DrawSVG. Maybe something like this.

 

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

 

I just did a copy and manual paste for each path in this demo, but the d attribute is the same so you could tighten this up a bit more by cloning the base path or just setting the d attribute.

 

Hopefully this is what you meant and I'm not still confused. :)

 

The DrawSVG plugin is a Club plugin. More info:

https://greensock.com/club/

 

Happy tweening.

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

Yes indeed, this is what I was looking for.
But could you please let me know what am I doing wrong on masking my path here? 

See the Pen BapBoxo by leonardpbdigital (@leonardpbdigital) on CodePen

 

Thank you!

Link to post
Share on other sites

A few things. 

1. You need to load the drawSVG plugin.

2. Masks need to have a stroke of white and no dasharray.

3. You have a lot of code from my demo that causes errors because the elements are not there. (button, marker etc.)

 

I forked your demo, made those changes and commented out most of the code. I've set the mask path animation to yoyo so you can clearly see it working.

See the Pen 4293bde8c57ac4c848692ef8a7d7ca92 by PointC (@PointC) on CodePen

 

More info about masks can be found on my training site:

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

 

I'd also recommend going through my dashed lines tutorial which was mentioned above.

 https://www.motiontricks.com/svg-dashed-line-animation/

 

Happy tweening.

:)

 

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

That's awesome!
Thank you very much! 

 

One last question why is that the .path-1 's stroke-width isn't updating? 

I updated my pen above. 

 

Again, thank you!

Link to post
Share on other sites

Sorry, I'm not following. I don't see any strokeWidth animations in your demo.

 

Just FYI - the demo is also throwing errors as you haven't loaded jQuery.

  • Like 3
Link to post
Share on other sites

Sorry I mean if you go to the css tab and update the .dashedPath class and set the value to stroke-width:5; then you'll notice the active path-1 isn't affected. 
image.png.1722e01633fef97ca4059c09ca50dd60.png

Don't worry about the jQuery as I implemented this page already somewhere. Just curious about the stroke-width with the first active path. 
Thank you!

Link to post
Share on other sites

That's because your first drawSVG tween is tweening to 0. You're effectively hiding the content underneath instead of revealing it. So what you're seeing is not a dashed path but rather this path on line 292

 

          <path class="path-road path-1" 
            d="M184.211 134.5C155.711 146.167 108.511 140 111.711 50" 
            stroke="#FDA760" 
            stroke-width="3" 
            stroke-linecap="round" 
            stroke-dasharray="4 8"/>

That path has a strokeWidth of 3 and does not have a class of dashedPath so it of course is not affected by the CSS rule. You could solve it by changing that path to a strokeWidth of 6 or you can fix your mask paths so they draw to 100% rather than 0.

 

Make sense?

  • Like 1
Link to post
Share on other sites

That made sense on that part but I'm wondering why it doesn't apply to the other paths? 


I wrapped them with the same <mask> and in #maskReveal 

I updated my pen again 

See the Pen BapBoxo by leonardpbdigital (@leonardpbdigital) on CodePen

 

The only problem now is the direction. Why its going to the other way? 


Sorry for asking too many questions. Am really confused. 😅

Link to post
Share on other sites

I'm not sure if that path was created backwards or why you have it drawing to 0. I just know that it's actually revealing the road path I mentioned above rather than the desired dashed path. The road path also isn't in the masked group. Your SVG is pretty big and diving into all the paths is outside the scope of the forum help we can offer. I'd just take another look at the artwork in your vector software and make sure the paths go in the desired direction.

 

Happy tweening.

:)

 

  • Like 1
Link to post
Share on other sites

Yeah - there are some odd path directions. I'd still recommend jumping back to your vector software and cleaning it up a bit, but you can also use percentages to fix some of it. Like this for example.

 

ptl.fromTo("#path-2", { drawSVG:"0% 100%"}, {drawSVG:"100% 100%"});

You're still erasing the mask which is counterintuitive to me, but maybe I'm missing something.

 

Happy tweening.

:)

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

×