wescott

Yeah, it looks like Pancake breaks the SVG into multiple segments somewhere. The same problem occurs when using Svelte's native draw animation. I opened an issue on that library. Thanks for helping me diagnose the problem.

Thanks Jack and Zach. Unfortunately, adding 'live' didn't seem to affect it, but I appreciate the shot in the dark. I added a console.log(target) into DrawSVGPlugin.js and I'm getting three separate logs printed simultaneously when I call a simple fromTo( { drawSVG: 0}, {drawSVG: '0% 100%'}). Is this normal behavior? It does line up with the three separate line segments I get when I animate my path.

Hey Zach. Thanks for the reply! I'm also getting the gap in FireFox. I understand. I'm sorry about that. I wish there was a way for me to reproduce the Svelte code on CodePen. Whenever I strip away the svelte layer (like in this Pen), it seems to work fine so you're right in that it probably is something wrong with my implementation in Svelte. I'm using a relatively experimental library which automatically scales SVG charts called Pancake so that could be the issue. I was just hoping that someone more experienced with GSAP than myself might be able to give me some guidance on what could cause this sort of problem. For example, could the SVG start points be messed up somehow?

gsap.fromTo( node, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 5 } ); Hi GSAP! I'm having a problem with the DrawSVGPlugin in which a gap is appearing in the middle of my path as it's being drawn. I came across a thread from 2014 which seemed to describe a similar problem on FireFox to the one I'm currently experiencing, however this is occurring on Chrome (v. 86). I can't really reproduce the problem in CodePen because I'm using SvelteJS to build the app, but I'll do my best to describe it. I'm calling this animation function once the element is loaded using Svelte's bind directive: const drawGraph = (node) => { // console.log(node); gsap.fromTo( node, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 5 } ); }; When I do console.log(node)it seems to grab the entire path element fine: <path class="data svelte-1sw7grj" d="M 0,100 C 4.000000000000007,80 9.999999999999998,10 20,0 C 29.999999999999993,-10 38,48 50,50 C 62,52 70.00000000000003,0 80,10 C 89.99999999999999,20 96.00000000000001,82 100,100" style="stroke-dashoffset: 293.999; stroke-dasharray: 313.305px, 323.305px;"></path> Note: From my understanding it could be this style="stroke-dashoffset: 293.999; stroke-dasharray: 313.305px, 323.305px;" business that is causing the gap, but I'm not sure where this is being set. I figured it was set by the DrawSVGPlugin itself. I've tried the following combination of fromTo to no avail. The last one (where I go over 100%) appears to animate the first line segment correctly however the second line segment is still present. gsap.fromTo( node, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 5 } ); gsap.fromTo( node, { drawSVG: '50% 50%' }, { drawSVG: '0% 100%', duration: 5 } ); gsap.from(node, { drawSVG: 0, duration: 5 }); gsap.fromTo( node, { drawSVG: 0 }, { drawSVG: '0% 400%', duration: 5 } ); Any ideas on what might be causing this problem based on this behavior? The bug may have to do with Svelte, but I'm not sure what I should be looking for since the path element seems to be rendered correctly. Please let me know if there is anything else I can add to make debugging this easier. Thanks!