paths don't always meet about walkway

[corysimmons]

This is made worse (or sometimes better) by messing with stroke-miterlimit

[chutsu]

Could you post the SVG please?

[corysimmons]

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M56.1,132.6c0,0-8.1-78.7,57.9-78.2s88.3-23.9,67.5,36.5
    s-10.7,67.2-56.9,59S72.8,165.1,56.1,132.6z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M95.1,171.7c0,0-26.3-86.8,54.9-82.7s96.9-41.1,81.2,4.1
    s22.8,80.2-35.5,87.3S111.4,201.7,95.1,171.7z"/>
</svg>

[corysimmons]

It seems like Metronome fixes this with Math.floor:

...
Math.floor(length * (1 - progress));
...

[corysimmons]

Ah, seems like Walkway does this too.

Not sure why but Metronome works and Walkway doesn't in this instance.

[corysimmons]

• http://codepen.io/corysimmons/pen/jykvp
• http://codepen.io/corysimmons/pen/BjJDx

[chutsu]

For some reason the Metronome version isn't animating for me. . . (firefox), I can animate it on Chrome.

Connor (author) is with me at the moment and he doesn't have his laptop, will be home in a couple of hours. Thanks for posting the examples, it's a big help +1

[peterkos]

In Walkway, for me at least (in Safari 8), the closeness of the meeting of the paths depends on the duration of the animation.
For instance, this is the result of a 500ms delay:

and this is the result of a 2000ms delay:

[corysimmons]

So weird. Definitely unexpected behavior.

[ConnorAtherton]

@corysimmons I agree, this is a bug, thanks for creating this issue. @peterkos Thanks for the extra info.

[ConnorAtherton]

@corysimmons Can you post the Walkway constructor code you used please?

var svg = new Walkway({
  selector: '#tester',
  duration: 1000
});

svg.draw(function() {
  console.log('test finished');
});

This works for me running on latest Chrome and Firefox and I modified your SVG attributes as a check. Can you try with this and let me know if it's still not working for you when you have time?

<svg version="1.1" id="tester" xmlns:svg="http://www.w3.org/2000/svg" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
  <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M56.1,132.6c0,0-8.1-78.7,57.9-78.2s88.3-23.9,67.5,36.5s-10.7,67.2-56.9,59S72.8,165.1,56.1,132.6z"/>
  <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M95.1,171.7c0,0-26.3-86.8,54.9-82.7s96.9-41.1,81.2,4.1s22.8,80.2-35.5,87.3S111.4,201.7,95.1,171.7z"/>
</svg>

[corysimmons]

@ConnorAtherton http://codepen.io/corysimmons/pen/jykvp

[peterkos]

It's the easing: linear that's causing it... works fine without.

[ConnorAtherton]

@corysimmons @peterkos Just want to thank you again for taking the time to describe this bug. Should be fixed now.

[corysimmons]

👍 Awesome

FYI I'm covering Walkway in a TutsPlus Course scheduled to release soon. =)

[ConnorAtherton]

Wow, could you ping me once it's released? I'd love to take a look at it :)

[corysimmons]

Sure