Jump to content
GreenSock

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

drawsvg dash continuously move around

Recommended Posts

Is there a way to have the dash continuously move around without that glitch when the end and starting point meet?

I forked one of your pens.

Thanks

See the Pen MWYxQQN by sirhclluk (@sirhclluk) on CodePen

Share this post


Link to post
Share on other sites

Hey sirhclluk and welcome. 

 

Our very own @PointC wrote a great article on this subject. It even has a handy helper function that can make the effect that you're wanting easier :) 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks @ZachSaucier That example is beautiful. But it's too much dev work for me to really grasp. After playing around with it for a while I was able to get what I wanted by overlapping the beginning and end of the Illustrator art. Here is what I have. 

See the Pen mdyoMzO?editors=1010 by sirhclluk (@sirhclluk) on CodePen

  • Like 4

Share this post


Link to post
Share on other sites
20 hours ago, sirhclluk said:

After playing around with it for a while I was able to get what I wanted by overlapping the beginning and end of the Illustrator art.

Seconding what mikel said, very clever approach! I will make sure to link to this thread going forward so that others are aware of this approach as well.

Share this post


Link to post
Share on other sites
On 1/26/2020 at 12:41 PM, sirhclluk said:

overlapping the beginning and end of the Illustrator art

 

Yes nice approach @sirhclluk. Is there a relationship between the overlap % in the artwork and the drawSVG %? I fiddled with the numbers along with the stroke-miterlimit both +/- relative to each other and it was quickly no longer seamless. How is it easily calculated between the two, whats the obvious trick for any senerio? 😀

Share this post


Link to post
Share on other sites

 

Hey,

 

That would be an option

 

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

 

Happy tweening ...

Mikel

Share this post


Link to post
Share on other sites

I was still interested how @sirhclluk factored it between Illustrator and his code.

 

Thanks @mikel. So using your example approach, even though its coupled with drawSVG afterwards does using “getTotalLength” initially still cause inconsistencies as discussed quite frequently throughout the forum? Or does drawSVG correct things internally after the fact when getTotalLength is initiated beforehand?

Share this post


Link to post
Share on other sites

@Shrug ¯\_(ツ)_/¯I was thinking about what was going on in the art, and tried the overlap as a test. I saw the result was promising and tweaked the length a few times, and thats it. 

  • Like 2

Share this post


Link to post
Share on other sites

 

Hey @Shrug ¯\_(ツ)_/¯,


I don't 'live' under the hood understanding what's going on there. Just playing on the surface.
I only used getTotalLength to calculate the proportion 'dash' to the total length.

 

Happy Tweening ...

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the replies @sirhclluk & @mikel.

 

I was just curious if using getTotalLength remained appropriate without issue in this case. As mentioned above its discussed frequently regarding inconsistancies amoungst browsers, etc., here at the forum. @GreenSock just spoke breifly about it recently, but there are some lenghtly discussions that can be searched and reviewed.

 

Anyway good stuff thanks for the conversation.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×