Enable sync with transform between tracked elements and ScrollScene

[liqueflies]

Hello!

I have a question: is it possible to enable sync between tracked transformed elements and the webgl ScrollScene?
I reproduced my situation with a basic example of r3f-scroll-rig:

• If I translate the tracked element, the webgl is not syncing
• If I translate a parent of a tracked element, which obviously affect also the tracked element position, the webgl is not syncing.

Here is a link for the repro: https://codesandbox.io/p/sandbox/scrollrig-and-translate-lvm5ct

Thank you so much,
L.

[ffdead]

Hi @liqueflies
I think you might be interested in this previous discussion: #27 (comment)

the design goal of this project is not to match css transforms/animations - but to sync HTML/WEBGL and then do the fancy stuff with webgl.

you could implement something like that on top of it though, if you really need it :)

[liqueflies]

Ok so just to be sure, looking at the samples from the library

(https://camo.githubusercontent.com/34f5a96b9583d85685973287d8f80d2356ab9556b84a9aad5751be3df4f19f29/68747470733a2f2f7777772e64726f70626f782e636f6d2f732f6b71617765673939366a746232686f2f313469736c616e64733630305f31306670735f322e6769663f646c3d30267261773d31)

Where the scale is supposed to apply? Directly to the mesh ref and not to the dom?

Thank you for your reply!

L.

EDIT:

I managed to fix my problem: I have a menu that when it's opened translates the whole body to the right (something like Gmail panel) and I am translating a wrapper of the page.

Calling reflow() from useScrollRig in each frame update of the animation will solve the problem!

[ffdead]

Ok so just to be sure, looking at the samples from the library
(https://camo.githubusercontent.com/34f5a96b9583d85685973287d8f80d2356ab9556b84a9aad5751be3df4f19f29/68747470733a2f2f7777772e64726f70626f782e636f6d2f732f6b71617765673939366a746232686f2f313469736c616e64733630305f31306670735f322e6769663f646c3d30267261773d31)

Yes this is just a fancy animation on the WebGL mesh - the hidden DOM element is always the size of the original DOM image.

I managed to fix my problem: I have a menu that when it's opened translates the whole body to the right (something like Gmail panel) and I am translating a wrapper of the page.

Calling reflow() from useScrollRig in each frame update of the animation will solve the problem!

Interesting use case! Calling reflow() in a useFrame is most likely not the most performant way of doing it, but happy you found a workaround.

Wouldn't it make more sense to also transition the <canvas> element to the right together with the body? In that case it would "match" the DOM without you having to recalculate positions in the 3D scene (at least in theory)