Issue when using MorphSVG and DrawSVG plugins simultaneously

[Neverbland]

I'm trying to use DrawSVG and MorphSVG plugins together to create an animated squiggle line that compresses as the density increases.

 

An issue I am having is when you pull the density slider to the middle position and then back to the start position you see a small black line appear at what would be the start of the line drawing, its as if the drawSVG plugin has gone a sub-pixel to far causing it to loop round to the start.

 

Is this a bug or is there something missing on how this is set up? 

 

Thank you in advance! ⭐

See the Pen emOQZdb by spamspark (@spamspark) on CodePen.

[mvaneijgen]

Hi @Neverbland welcome to the forum!

 

First of, really clever way of updating the timeline using another tween, that is some advanced features that we do not see first time posters use everyday!

 

Do you maybe have a screenshot of what you would want it to look like or screen recording. I'm currently not sure what the end result should be vs what it is doing now. 

 

Also it is always a smart idea to just forces on the animation at frist to see if that is doing what it is supposed to do, I've installed GSDevTools to easier debug it. 

 

See the Pen azoQNgd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

[Neverbland]

8 minutes ago, mvaneijgen said:

Hi @Neverbland welcome to the forum!

 

First of, really clever way of updating the timeline using another tween, that is some advanced features that we do not see first time posters use everyday!

 

Do you maybe have a screenshot of what you would want it to look like or screen recording. I'm currently not sure what the end result should be vs what it is doing now. 

 

Also it is always a smart idea to just forces on the animation at frist to see if that is doing what it is supposed to do, I've installed GSDevTools to easier debug it. 

 

 

 

 

 

Hey!

Cheers for coming back so quickly.

So if you scrub the dev tool to the middle position and then back to the start, you will see a black line appear at the top of red box, (see screenshot attached). 

Why is this? and can it be removed and reset correctly?

[mvaneijgen]

I think I don't see that happening 

 

 

[Rodrigo]

Yeah I can see the line but most likely is due to the way your SVG is setup. I changed the viewbox a bit and I can't see it anymore:

 

See the Pen GgKwrwP by GreenSock (@GreenSock) on CodePen.

 

Getting your SVG correctly is a large part of the success of animating SVGs.

 

Hopefully this helps

Happy Tweening!