pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
28.18k stars 1.19k forks source link

entry.interpolation._interpolation is not a function #91

Closed rubenspgcavalcante closed 6 years ago

rubenspgcavalcante commented 6 years ago

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

drcmda commented 6 years ago

@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.

rubenspgcavalcante commented 6 years ago

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.

rubenspgcavalcante commented 6 years ago

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

drcmda commented 6 years ago

@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 ... ?).

drcmda commented 6 years ago

@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.

rubenspgcavalcante commented 6 years ago

Awesome! Thanks @drcmda :)