using interpolatePath throws "outputRange cannot include undefined. (,)"

Hey,

I have two paths

const playPath = 'M11 10 L18 13.74 18 22.28 11 26 M18 13.74 L26 18 26 18 18 22.28'
const pausePath = 'M11 10 L17 10 17 26 11 26 M20 10 L26 10 26 26 20 26'

And I’m trying to use do something

const d = interpolatePath(this.animatedValue, {
  inputRange: [0, 1],
  outputRange: [playPath, pausePath]
});


return (
  <SVG width={100} height={100} viewBox="0 0 36 36">
    <AnimatedPath {...{ d }} fill="green"/>
  </SVG>
)

This throws the following error: outputRange cannot include undefined. (,)

Any ideas?

[wcandillon]

@iremlopsum I just took a look at your example and indeed it will be a bit of work for redash to support. That’s a great use case we need to support tough!

[iremlopsum]

Thanks for the quick response 😃

I’m pretty new to SVG’s and not sure how to make this work without a move command. If you could point me in the right direction regarding either building my own interpolation function or how could I achieve the same path without a move command I would really appreciate it 😃