react-spring

Morph path with Spring react ("arity problem" on d attribute)


I got the "arity problem" with react-spring on this code:

<animated.path
                                    d={x.to({
                                        range: [0, 1],
                                        output: [
                                            ppath,
                                            ppath2,
                                        ],
                                    })}

                                />)

The exact error is

Error: The arity of each "output" value must be equal

The 2 paths are not empty and ok. I was wondering what if the arity problem with the "d" attribute. Are the 2 paths supposed to have the same number of element, curve ... ? Thanks for your help.


Solution

  • As stated in the docs:

    SVG paths (as long as the number of points matches, otherwise use custom interpolation)