Saturday, 3 July 2021

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!



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

No comments:

Post a Comment