Jump to content
Search Community

draw dashed path svg

tganyan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of.

Also, if you disable the js and run the pen that will show what I am trying to get the line to look like. 

See the Pen KYNZZv by tganyan (@tganyan) on CodePen

Link to comment
Share on other sites

Thanks! Looks like I'll have to read up some more on svg masks; I have an understanding of what a mask is/does generally speaking, but I still am not quite sure I understand why this particular mask is getting the desired effect. Which I'm sure comes down to a lack of intuition on this from being less experienced.


Update: Nevermind, I definitely get it. I hadn't noticed that the target element in the js was changed to the mask and not the regular motionpath. On initially looking at the markup, I thought just the motionPath was still getting animated and it made no sense to me, this does though.

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