Margin Auto Error "entry.interpolation.calc is not a function"

[enricobuehler]

Hello,

im trying to build a logo component on a current web project with react spring where the logo should, on a certain prop change, animate from the top left corner to the center of the page. I tried to implement this using marginLeft: "auto" and marginTop: "auto" to a fixed unit (eg 20px) but the site crashes and logs:

Uncaught TypeError: entry.interpolation.calc is not a function
at eval (VM3792 web.cjs.js:1417)
at Array.reduce ()
at Controller.update (VM3792 web.cjs.js:1397)
at Spring.render (VM3792 web.cjs.js:1830)
at finishClassComponent (VM3768 react-dom.development.js:13538)
at updateClassComponent (VM3768 react-dom.development.js:13501)
at beginWork (VM3768 react-dom.development.js:14090)
at performUnitOfWork (VM3768 react-dom.development.js:16416)
at workLoop (VM3768 react-dom.development.js:16454)
at HTMLUnknownElement.callCallback (VM3768 react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (VM3768 react-dom.development.js:195)
at invokeGuardedCallback (VM3768 react-dom.development.js:248)
at replayUnitOfWork (VM3768 react-dom.development.js:15745)
at renderRoot (VM3768 react-dom.development.js:16548)
at performWorkOnRoot (VM3768 react-dom.development.js:17387)
at performWork (VM3768 react-dom.development.js:17295)
at performSyncWork (VM3768 react-dom.development.js:17267)
at requestWork (VM3768 react-dom.development.js:17155)
at scheduleWork (VM3768 react-dom.development.js:16949)
at Object.enqueueSetState (VM3768 react-dom.development.js:11623)
at App.Component.setState (VM3770 react.development.js:413)
at eval (VM3780 App.js:48)

Its working fine when using 2 fixed values (eg 500px to 20px).
Ive also read a related issue that the container must have fixed width/height but this also didnt fix the issue.

Ive isolated the issue in a CodeSandbox: https://codesandbox.io/s/ry4w896p8p
(note: the index change works different on the real page so i mimicked it using setTimeout, this doesnt matter though since the result in the logo compenent should be identical)

[drcmda]

It's related to fix-auto https://github.com/react-spring/react-spring/blob/master/src/targets/web/fix-auto.js#L6-L9 which searches for either width or height in the property name. Without this it wouldn't know which value must replace "auto". I've seen someone trying to animate margin auto for the first time, can you even represent auto in that case with a animatable pixel value?

[enricobuehler]

So then maybe the documentation -> gotchas section about animating auto should be changed from "react-spring is one of the few libs that understands and animates auto, so you can use it in your configs, like so" to
"react-spring is one of the few libs that understands and animates width and height auto, so you can use it in your configs, like so:"?

[drcmda]

I'll flag this as a bug for now to investigate. Perhaps "left" is the same as width and "top" the same as height.

[phaistonian]

Related: Having height: '0px' trigger this whereas having it as height: 0, does not.

[aleclarson]

Closing this. Support for "auto" is being removed in v9.0.0 due to an incompatibility with hooks.

See here: #559 (comment)