Jump to content
Search Community

Dashed path not showing up - Arrow follow dashed path

stefdijkstra test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi there,

 

I would like to have the same effect as on this tutorial:

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

 

Everything is going well, except the drawing of the dashed line. 
I think I took all the necessary information, and even when I'm copying the code from codepen, the dashed line will not show up.

 

If is remove the part 'mask="url(#theMask)"', the dashed path is showing up.

 

Can somebody please help me? Thanks in advance!

 

Below the result of my code:

 

See the Pen LYjwdbQ by stefdijkstra (@stefdijkstra) on CodePen

Link to comment
Share on other sites

Hey @stefdijkstra,

 

There were quite a few things going on here.

The inline transforms were putting your elements in the wrong place - I removed them and adjusted the viewBox to bring everything into view again. You were also trying to animate the wrong element and had two masks which weren't needed.

The easiest way to debug masks is to get everything out of the mask so it's rendered and visible - work on getting it animated and then when it's working, move the path into the mask.

See the Pen NWvQBKV?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Hi Cassie!

 

Thanks for your info, I've changed my script with your tips and the animation is super now!

But now, there has been occured a new problem. 

 

In my first post (I've updated the codepen), the SVG fitted perfecty in the viewport (or parent element).

In your script it has been moved all around, could you help me in the right direction to fix this? 

 

I would be really thankful! Thanks in advance :)!

 

See the Pen LYjwdbQ by stefdijkstra (@stefdijkstra) on CodePen

Link to comment
Share on other sites

Sure - the viewBox value may need tweaking. Check the pen I attached again.

Another option is to leave the viewBox as it was to start with and move the paths.
https://lea.verou.me/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/

If you run your paths through the GUI above it will convert mixed paths (which is what you get out of graphics editors) to Absolute and Relative.

Grab the relative paths - the first two co-ordinates after the M are the initial x and y position. If the path is all relative the points will follow on from the first point so you can just move them around the SVG until they're in the right place - this will be affecting the geometry instead of using transforms which can break animations.

  • Like 3
Link to comment
Share on other sites

Hi @stefdijkstra :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Looks like you found my dashed paths tutorial. Thanks for reading motiontricks.com. :)

 

It seems @Cassie has you all fixed here, but I'll add a little extra. If you can get everything positioned correctly when you create the graphics you avoid all these weird little positioning problems. By using a background rectangle the same size as your project you can avoid a bunch of funky transforms when you export. I have a short tutorial about that here:

 

https://www.motiontricks.com/use-background-rectangle-with-svg-exports/

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Hi Cassie & PointC,

 

Thanks you very much for your helpfull tips!
I've added the rectangle and it works perfectly :). 

 

But I've created a new SVG and now the mask is not working well again. I've compared the HTML + codes from the example from Cassie, but I still can't figure out why the dashed line is not showing up. When I remove the masked, the dashed line is there, so I don't understand what is missing now. Can you help me for the last time?

 

See the codepen for the current result:

See the Pen LYjwdbQ by stefdijkstra (@stefdijkstra) on CodePen

Link to comment
Share on other sites

  • Solution

Hey again @stefdijkstra,

Just echoing this tip again - take the element out of the mask, get the animation working - then pop it back into the mask. ?
 

On 11/26/2021 at 3:02 PM, Cassie said:

The easiest way to debug masks is to get everything out of the mask so it's rendered and visible - work on getting it animated and then when it's working, move the path into the mask.


In this case you had a dashed stroke inside the mask which won't animate nicely with drawSVG - it needs to be a solid path.

Hope this helps!

See the Pen OJxJLbg?editors=1010 by GreenSock (@GreenSock) on CodePen

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