Search code examples
javascriptreactjsreact-springreact-three-fiber

Layout does not reflow when transition canvas parent's margin-right with react-spring and react-three-fiber

I am trying to create an animation with @react-spring, a mesh defined into a canvas with r3f and some dom elements. Actually I am unable to correctly change canvas size when I change margin-right of parent container. It does not reflow the layout, because if I scroll or change window dimension it works. Also, if I remove the canvas element and put in a dom element, all work as expected.

To give you an idea I prepared this codesandbox: https://codesandbox.io/s/nostalgic-bohr-lqxo7

Can I fix it some ways?

I am open to all kind of suggestions: switch from margin-right to something else (width, transform and so on) or with something different pattern.

For example, I already tried transitioning width property instead of margin-right, but the model moves to the new size of canvas ungraceful. You can also test it if you change useSpring stuff into BigWrapperModel component (you need just to comment and uncomment, it is already here).

Thanks!

Solution

  • I switched from margin-right to right and add position: absolute to container-globe. I also added hidden: overflow to wrapper-big-globe.

    It seeems to work, containers now transition to the new size and position; model moves properly. Just check original codesandbox for a fix working example.