sirhclluk Posted January 25, 2020 Share Posted January 25, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 25, 2020 Share Posted January 25, 2020 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 3 Link to comment Share on other sites More sharing options...
sirhclluk Posted January 26, 2020 Author Share Posted January 26, 2020 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 4 Link to comment Share on other sites More sharing options...
mikel Posted January 26, 2020 Share Posted January 26, 2020 Hey @sirhclluk, Clever, tricky, creative ! 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 27, 2020 Share Posted January 27, 2020 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. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted January 27, 2020 Share Posted January 27, 2020 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? 😀 Link to comment Share on other sites More sharing options...
mikel Posted January 27, 2020 Share Posted January 27, 2020 Hey, That would be an option See the Pen dyPLZPV by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted January 27, 2020 Share Posted January 27, 2020 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? Link to comment Share on other sites More sharing options...
sirhclluk Posted January 28, 2020 Author Share Posted January 28, 2020 @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. 2 Link to comment Share on other sites More sharing options...
mikel Posted January 28, 2020 Share Posted January 28, 2020 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 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted January 28, 2020 Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 10, 2021 Share Posted February 10, 2021 FYI this is much easier after GSAP 3.6: 2 Link to comment Share on other sites More sharing options...
PointC Posted February 10, 2021 Share Posted February 10, 2021 22 minutes ago, ZachSaucier said: FYI this is much easier after GSAP 3.6: Yeah it is. Wheeeeeee! See the Pen PoNxqVR by PointC (@PointC) on CodePen See the Pen BaKGyaa by PointC (@PointC) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now