[BUG] framer-motion-3d MotionCanvas does not resize/update with parent container

[3lijah]

1. Read the FAQs 👇

2. Describe the bug

When resizing the element containing the canvas, the canvas should resize as well.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

In this r3f example, the element stays centered when resizing the iframe: https://codesandbox.io/s/react-spring-animations-6hi1y

In this framer-motion-3d example, the element retains its initial coordinates: https://codesandbox.io/s/framer-motion-3d-variants-9173p

4. Steps to reproduce

Steps to reproduce the behavior:

1. Load a page that contains a MotionCanvas that takes up the full window size.
2. Resize the window
3. Notice that the canvas does not resize to fit the new window size.

5. Expected behavior

The canvas should resize with its parent and the scene should update to reflect the new size and aspect ratios.

6. Video or screenshots

[KimPaow]

@3lijah did you figure out what the cause of this is? The docs mention that resize is omitted from the original canvas component, but nothing more, I guess this should work out of the box.

[3lijah]

@3lijah did you figure out what the cause of this is? The docs mention that resize is omitted from the original canvas component, but nothing more, I guess this should work out of the box.

No, I haven't made any progress. It does seem intentional but problematic for full-window experiences.

[KimPaow]

From what I can understand there simply doesnt appear to be any implementation for resizing: source

The r3f canvas uses use-measure which responds to changes. Maybe i'm missing something, but to me this seems like an easy thing to implement.

[wolfgangschoeffel]

Does anybody have a solution for this? Is there a way to trigger the resize handler somehow from outside of the component?

[sdacunha]

Sadly seeing this still, if anyone has a workaround, it would be greatly appreciated.

EDIT: Submitted a PR #2047