Lines not joining properly about vivus HOT 9 CLOSED

Ewwww... I thought I fixed it, and I actually did, but I should make it better :-S
I put it in my list.

For now, what you can do add the attribute selfDestroy with the value true.

So your code would look like

new Vivus('Layer_2', {
  type: 'async',
  duration: 50,
  selfDestroy: true
}, function () {
  console.log('animation done');
});

The reason is, by using selfDestroy it remove all stroke-dasharray and stroke-dashoffset attribute from all path elements in the SVG.

Hope it helps :)

from vivus.

Thanks! That worked for me.
I still don't understand why the final values of stroke-dasharray don't work as expected, but I guess since this whole technique is a clever workaround we can't expect too much :)

from vivus.

Hi @maxwellito ,

your solution does not help when using:

type: 'delayed',
duration: 200,
pathTimingFunction: Vivus.EASE_OUT,
animTimingFunction: Vivus.EASE_OUT,

Can you give another fix please?

from vivus.

from vivus.

Please take a look at it by following this link http://demo.themeuniverse.net/pear/demo-8/ See animated triangle at the bottom of the page above

Would you like to order a project?

text.

from vivus.

I tested

selfDestroy: true

and removed it as it does not help. It helps to to join the triangles lines but it looks not smooth, lines join immediately without animation.

from vivus.

Ok, I found out why. I need to fix a little problem for SVG with 1 path. For now just use this options object:

{
    type: 'oneByOne',  // << that's the fix
    duration: 200,
    pathTimingFunction: Vivus.EASE_OUT,
    //animTimingFunction: Vivus.EASE_OUT,
    start: 'manual',
    selfDestroy: true
}

But personal advice, avoid using pathTimingFunction and animTimingFunction on such a single path SVG. You just double the ease.

from vivus.

Animation still looks not smooth for me. Is it possible to fix it without using

selfDestroy: true

?

from vivus.

The end will never look smooth.

from vivus.