Failed to execute 'getPointAtLength' on 'SVGGeometryElement': The provided float value is non-finite

[TheDhejavu]

Failed to execute 'getPointAtLength' on 'SVGGeometryElement': The provided float value is non-finite

I notice that eased returns undefined in the latest version of svgjs, old version doesn't behave like this,

NOTE: I'm new to svgjs

 var canvas = SVG().addTo('#drawing').size('100%', '100%').viewbox(0,0,800,1000)
    var rect = canvas.rect(50).fill('#f74e1a').stroke({width:1, color: '#f74e1a'})
    var path = canvas.path("m 357.64532,453.84097 c 17.62007,8.02216 -2.12058,27.70935 -13.33334,29.28571 -30.3859,4.27185 -48.34602,-29.97426 -45.23807,-55.9524 5.5594,-46.46879 56.1311,-70.59787 98.57145,-61.19043 62.28294,13.8058 93.32728,82.57702 77.1428,141.19051 C 453.21679,585.29693 365.67122,623.42358 290.97859,600.26951 196.98554,571.13248 151.71003,464.56996 181.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113")
    var length = path.length()
    // rect.radius(10, 20)
    path.fill('none').stroke({width:1, color: '#f74e1a'})
    path.animate(3000).rotate(360)

    rect.animate(3000).move(100, 100).during(function(pos, morph, eased, situation) {
      var p = path.pointAt(eased * length)
      rect.center(p.x, p.y)
    }).loop()

[Fuzzyma]

What is the old version and the latest version you are referring, too?

In 3.x this code doesnt work anymore. Especially the line path.pointAt(eased * length) beccause the parameters have changed. You only get the position passed to the during function and nothing else.

As a general tip: debugging would have showed you this. You can be new to svg.js but as long as you are good with js in general you can easily dig depper to find your mistake :)

[TheDhejavu]

@Fuzzyma thanks for the response, I actually did dive deeper to debug the error but the documentation for .during(function(pos, morph, eased, situation) indicates that 4 params are meant to be parsed into the callback function of during but only the first param seems to be valid while the rest of the parameter returns undefined. The old version I'm referring to is 2.x, it works well using that but I don't want to settle for an old version because I believe the new version might offer some new and improved features.

[Fuzzyma]

In that case the documentation is wrong. As a matter of fact only the position is passed.

Would you mind raising an issue about that in the docs repo?

[TheDhejavu]

Alright. I will do that now

[kelvinsekx]

Here is a working solution if you find this error https://codesandbox.io/s/old-currying-ps5k7k?file=/src/index.js