Gap in DrawSVG animation

[wescott]

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!

[ZachSaucier]

Hey wescott and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

12 minutes ago, wescott said:

this is occurring on Chrome (v. 86)

Is it only occurring in Chrome? Or does it happen in all browsers?

 

It's really hard to say what's going on based on the limited information that you provided. I encourage you to try and recreate it in a pen. If you can't, it's likely an issue with your setup so continue trying to reproduce it more minimally (and outside of SvelteJS) to see if you can figure out what's causing the issue.

[wescott]

Hey Zach. Thanks for the reply! I'm also getting the gap in FireFox.

1 hour ago, ZachSaucier said:

It's really hard to say what's going on based on the limited information that you provided.

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

See the Pen jOrpEpb by wescottsharples (@wescottsharples) on CodePen

), 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? 

[ZachSaucier]

30 minutes ago, wescott said:

Pancake so that could be the issue

Try stripping it out and see  

 

31 minutes ago, wescott said:

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? 

Given the issue isn't with GSAP and we can't look at the rendered output I don't know that we can help.

[GreenSock]

Yeah, I'm not sure we can do much to help there, but have you tried adding "live" to the drawSVG value to force it to recalculate the length during the tween? See the docs for details: https://greensock.com/docs/v3/Plugins/DrawSVGPlugin

 

(I have no idea if that'll actually help; it may be totally unrelated but I figured I'd toss it out there in case it helps)

[wescott]

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.

 

[ZachSaucier]

So something in your setup is breaking up your path into multiple paths? 

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