How to handle 'non-remotion' animations? Ex: Mapbox adding points over time

[sullen carbon]

Let's say I want to copy this Mapbox example : https://docs.mapbox.com/mapbox-gl-js/example/free-camera-path/

They are using window.requestAnimationFrame() and doing some math to figure out where to move the map & camera to. Sadly this doesn't mesh well with Remotion, seeking in the player is completely broken since it's not really a by-product of currentFrame()

I thought doing a useEffect with the current frame as a dependency might work, but it's not working (not sure if my problem but I get warnings in console that render is X ms)

useEffect(() => {
  // calculations to move map camera
}, [frame]);

Is there a way to get around this problem? I figure my struggles aren't limited to just Mapbox so examples integrating other libraries would be helpful too!

Or is Remotion really just the wrong tool for the job here? Is there something else I should use instead? Just need to generate 15-30s clips from the map 👌

Thanks!

[upbeat mica]

hey @sullen carbon, great question! I decided to turn it into an example and a video that I will also post on twitter late once it is captioned.

here is my answer and example repo! https://github.com/remotion-dev/mapbox-example

[sullen carbon]

wow thanks Jonny! Sorry for the delay this example is great, going to play around with it and see if there's anything else I get stuck on. You explain things pretty well!