Framer motion layout animation does not work on Preact

afzalsayed96 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

I have same problem too, waiting for patch 😭

andrewgadziksonos commented 3 years ago

This seems fixed with the following dependencies,

"framer-motion": "5.0.0-beta.44",
    "preact": "10.5.15",
    "preact-compat": "npm:@preact/compat@0.0.3",
    "react": "npm:@preact/compat@0.0.3",
    "react-dom": "npm:@preact/compat@0.0.3"

o-alexandrov commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

JajarGaming commented 8 months ago

Is there anything new on this?

preactjs / preact