React-spring: entry.interpolation._interpolation is not a function

Created on 19 May 2018  路  6Comments  路  Source: pmndrs/react-spring

First of all thanks for this awesome library!
So, I've tried the example based on this one using the primitive go lib to generate the SVGs.
Then I fetch these SVGs and convert them using the DOMParser API, just to get the attributes of each path node and apply on the <animated.path />.
But when Spring tries to animate from one SVG to another, it throws an exception:
entry.interpolation._interpolation is undefined
Checking the code, it does verify if entry.interpolation exists, but don't check the inner _interpolation:

 // Deal with interpolations
 var previous = entry.interpolation && entry.interpolation._interpolation(entry.animation._value);

You can check it directly here https://react-spring-sample.surge.sh/ (just click on the image)
And the source here: https://github.com/rubenspgcavalcante/react-spring-sample

bug

Most helpful comment

@rubenspgcavalcante finally had time - it was something completely unrelated, it didn't recognize your fill color, it's working now as expected in the latest version.

All 6 comments

@rubenspgcavalcante looks like the example is incomplete, it's missing the svg's.

My feeling is that perhaps the svg's you feed it have a varying number of paths, could that be? they ought to be the same, and each path has to have the same structure and amount of points. Otherwise you would need a specialized svg interpolator like flubber. But this is how the demo pulls it off.

Hello @drcmda ,
So, I've updated the example to use the file-loader to load the svg (the url loader change polygons to paths to make it smaller). Also put a console.log on the number of polygons I'm using (50 in each one). You can see it here and here.

So, I just map each polygon of both images to try to make them animate.

I'm getting another error message now (instead of undefined, it's says _interpolation isn't a function) 馃

@rubenspgcavalcante sorry i was(/still am) a little busy due to work and the react-native stuff. It would be such a help if you could debug deeper. You can actually import from src directly "react-spring/src/targets/web/index" (in the latest version) and get to debug sources that way. Would be interesting why _interpolation is either undefined or not a function (what would it be if it isn't one ... ?).

@rubenspgcavalcante finally had time - it was something completely unrelated, it didn't recognize your fill color, it's working now as expected in the latest version.

Awesome! Thanks @drcmda :)

Was this page helpful?
0 / 5 - 0 ratings