JamesGrubb Posted August 31, 2020 Share Posted August 31, 2020 Hi all. Attempting to animate a stroke's dasharray. The pen shows the intended animation with css keyframes and the gsap code i've attempted to use to no avail. Any ideas please See the Pen eYZEerE by limitedunlimited (@limitedunlimited) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted August 31, 2020 Share Posted August 31, 2020 I'd use DrawSVG to make your life easier. See the Pen 39ef9a4f967c00ce541d2d7c51bc679d by PointC (@PointC) on CodePen I wouldn't recommend the little set pathLength to 1 trick as pathLength is deprecated. https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/pathLength Happy tweening. 3 Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 31, 2020 Author Share Posted August 31, 2020 Thanks burning the midnight oil @PointC Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 31, 2020 Author Share Posted August 31, 2020 I believe drawSVG is club greensock only? Link to comment Share on other sites More sharing options...
PointC Posted August 31, 2020 Share Posted August 31, 2020 Yep - but you can try it for free on CodePen. Give it a whirl. I think you'll dig it. Plus, you get a ton of other plugins with Club membership. Link to comment Share on other sites More sharing options...
PointC Posted August 31, 2020 Share Posted August 31, 2020 Just FYI. You can make this happen without DrawSVG by getting the total length, but DrawSVG solves a lot of browser inconsistencies and bugs for you. Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick. Firefox will throw an error if you try calling getBBox() on an element that isn't visible (which you may need to do to calculate the length for normal shape elements like <rect>, <line>, etc. - DrawSVGPlugin works on all those shapes so you don't have to use a <path>) Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin. Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times. Some browsers render artifacts if dash is 0. When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust. A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't. You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc. IE and Firefox have some bugs that cause <path>.getTotalLength() not to work properly. Happy tweening. 4 Link to comment Share on other sites More sharing options...
JamesGrubb Posted September 1, 2020 Author Share Posted September 1, 2020 Thanks again. Link to comment Share on other sites More sharing options...
SeanCooley Posted February 11, 2021 Share Posted February 11, 2021 On 8/31/2020 at 6:21 PM, PointC said: I'd use DrawSVG to make your life easier. I wouldn't recommend the little set pathLength to 1 trick as pathLength is deprecated. https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/pathLength Happy tweening. @PointC Just an FYI to you and all the other memebers. the pathLength attribute for svg elements has not been deprecated, the article you linked to is the javascript API. Here's the MDN page:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength 1 1 Link to comment Share on other sites More sharing options...
PointC Posted February 11, 2021 Share Posted February 11, 2021 You are correct - wrong link. My error. I'd still recommend using DrawSVG for all stroke animations because of all the reasons listed above. 1 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