Framer motion layout animation does not work on Preact

[afzalsayed96]

Reproduction

demo: https://codesandbox.io/s/framer-motion-preact-forked-ip6tb?file=/app.js

Steps to reproduce

Click on the square blue box

Expected Behavior

The box should animate when it's height changes

demo: https://codesandbox.io/s/framer-motion-2-layout-viec0?file=/src/App.js

Actual Behavior

No animations happen on height change

[marvinhagemeister]

Spent some time debugging this today and the issue is caused by the new style values already being applied when framer-motion is grabbing the old bounding box to tween from. This happens in the getSnapshotBeforeUpdate lifecycle of the Measure component. The tree structure looks something like this:

<MotionComponent>
  <Provider>
    <div> // this will be measured
  </Provider>
  <MeasureContextProvider>
    <Measure /> // This will measure the div above
  </MeasureContextProvider>
  <AnimateLayoutContextProvider>
    <Animate />
  </AnimateLayoutContextProvider>
</MotionComponent>

The current reconciler in Preact does a single pass when traversing the tree. It will first update the <Provider> and all it's children and continue with the next child, which is MeasureContextProvider. But the problem is that at this point the new styles have been already applied to our div element and framer motion bails out of rendering (which is correct).

I'm not sure what the reason for this specific tree hierarchy is, but there are probably valid reasons for that. We're currently working on revamping our reconciler to be based on two passes, which should resolve this issue. We just started with that and there are no timeframes as to when we'll be ready yet.

[afzalsayed96]

Thanks for the explanation @marvinhagemeister. Wish you good luck with the revamp! I would be happy to try out the beta when it comes out.

[andares]

I have same problem too, waiting for patch 😭

[andrewgadziksonos]

This seems fixed with the following dependencies,

"framer-motion": "5.0.0-beta.44",
    "preact": "10.5.15",
    "preact-compat": "npm:@preact/[email protected]",
    "react": "npm:@preact/[email protected]",
    "react-dom": "npm:@preact/[email protected]"

[o-alexandrov]

Tested latest versions of Preact & framer-motion. Unfortunately, layout animation and overall work with framer-motion is buggy in preact.

framer-motion has a new PR that will allow Preact users to start using framer-motion:

• https://github.com/framer/motion/pull/1984

[mattgperry]

A note on the above: This will only expose imperative APIs (animate, scroll, inView) so won't change the status of layout animations here.

[jokull]

Following this as I'd love to experiment with framer motion in Fresh interactive islands

[JajarGaming]

Is there anything new on this?