DOM calculations before rendering the first frame

[dsumer]

Cheers!

I have some highly dynamic animations which need to be done based on the size of elements which I need to calculate upfront via window.getComputedStyle.

Sadly I can't use delayRender in this case, because then Remotion also doesn't render the components I have in place to do those calculations.

I'd basically love to render some React Components and do some calculations using the DOM before rendering the first frame. Is something like this already achievable? What would be the best way to do it?

I actually already have the Remotion animation in place, but the first frames are always "empty" because it takes some time before my calculations are finished, and only after that Remotion is successfully rendering the frames.

Already thanks in advance. I absolutely love Remotion!

[dsumer]

oh I think I found a proper solution!

If I do my DOM calculation outside of the <Composition> component and waiting with a delayRender inside the <Composition>, I'm able to do my calculations, pass it down to the <Composition > and call continueRender as soon as I receive them.

It seems to work! 🥳

[JonnyBurger]

@dsumer Great, thanks for self-updating the response! 🙌

To give some more context, Remotion will mount the component and allow for measurement even if a delayRender() method is pending. However, as is usual with refs, they are only accessible after the first render.

Additionally Remotion wraps the components in <Suspense>, which could lead to another small delay. But other than that DOM calculations should be possible!