Jump to content
Search Community

Draw arrow with moving arrowhead, crossing paths

intelligence 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

Hello! 

 

I'm working on a site where the designer wants to have an arrow be drawn. The arrowhead should work as a cursor (I guess) following the path as the path is revealed.

 

I found this useful topic, where this example was very useful. However, I have noticed that whenever a path is revealed in a demo, there are never paths where the path cross itself. I understand that the basic principle is that you have a mask that is slightly bigger than the path it self, so I'm curious if it's possible to draw a line that crosses itself and have it not look super weird.

 

Would be nice to know if it works, before purchasing a membership so that I can access the DrawSVG plugin :)

 

Cheers!

 

 

arrow.png

 

 

arrow.svg

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

Link to comment
Share on other sites

Wow, that's awesome! Thanks for convincing me :)

 

I forked your pen and tried inputing my path information instead, changing:

<path id="line" fill="none" stroke="#000" stroke-width="10" d="M18.9 128.6c62 33 186 99 311.3 28.5 37.3-21 77.3-108-81.2-92.3-175.5 17.3-6 116.6 54.4 132.5 16.7 4.4 108.5 34.2 209.9-18.6"/>

 

Into:

<path id="line" fill="none" stroke="#000" stroke-width="10" d="M176.100907,1942.8788 C176.100907,1942.8788 167.960858,2039.12068 297.901905,2105.0976 C427.841804,2171.07657 561.938647,2072.46323 493.33163,2034.88 C424.722316,1997.2978 345.401986,2123.37533 484.064187,2150.77708 C622.726387,2178.1778 691,2134.97603 691,2134.97603"/>

 

And I noticed that it stopped working 

See the Pen YbJLzY by anon (@anon) on CodePen

.

 

I'm pretty new with SVG so could some explain to me why that happens? I'm getting these assets from a designer so I'm curious how I need to rework them to make it work (and look) like they want!

 

Thanks again!

Link to comment
Share on other sites

Hi @intelligence,

 

your path is related to a specific viewbox.

If you set the viewBox to  'viewBox="0 0 3000 3000"' (just for test),

you will see your path. Your path does not fit in the small viewBox.

 

See the Pen LogmMr by mikeK (@mikeK) on CodePen

 

But that´s not what you want.

So create a new line and arrow in Illustrator or Affinity Designer or ...

 

Best Regards

Mikel

 

  • Like 3
Link to comment
Share on other sites

  • 4 months later...
1 hour ago, Afrowave said:

I was wondering whether this can be done in real time

What do you mean "done in real time"?

 

1 hour ago, Afrowave said:

does this have to be done with a canvas tag and not an svg ?

This will probably be answered when you answer the above question, but I don't understand this part either because the demo above is in SVG.

Link to comment
Share on other sites

Sorry for not being clear. I would like to drag an arrow head from a base and the tail lengthen over time. Upon reaching the target, the arrowhead, onRelease, "sticks to the target and we are left with an stretched out arrow.

 

I called real time because I would be drawing the arrow with a mouse or touch drag. I hope that makes sense.

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