Skip to content

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

Closed
@enricobuehler

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    kind: bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions