How do I use requestAnimationFrame with Motorcycle and mostjs

Question

I am using Motorcycle to create a small application. I need to call a function on every requestAnimationFrame. Since it is a side effect, I know it must be done in an "effectful" component. However, mostjs doesn’t provide a source, such as it provides periodic() and now(), to make a requestAnimationFrame stream. How do I implement such a feature in my application?

Answer 1

It is possible to do this in your application using a library such as most-request-animation-frame which is @most/core ready and therefore 100% ready for usage with Motorcycle. It provides a function requestAnimationFrames(): Stream<Time> which will return a stream that emits the current time recursively scheduled with requestAnimationFrame.

Just as an FYI, the "current time" is determined using the Scheduler that the stream is run with and not the time that one might receive in the callback to requestAnimationFrame((timestamp) => { ... }). This way, time is injected as a dependency and is monotonic.