Animating on canvas

[m4rvr]

Hey! I'm trying to use Motion One for animating objects on a canvas but I'm not sure how I would do this exactly.

I've found that there is the progress function which the docs recommend to use.
Is it correct that this function is called even when the playState is set to paused? Currently I need to add a check to avoid updating the canvas unnecessarily.

My code looks like this

const animation = animate(
    (progress) => {
      if (anim.playState !== 'running') return
      
      // Update canvas and redraw
    },
    { duration: 3, repeat: Infinity }
  )

Is this the correct way to create a render loop that updates the canvas?

[mattgperry]

Yeah that’s right - this is currently to emulate how WAAPI behaves, running even while paused and the way it overrides any other css or styles but I have been thinking about changing it to avoid unnecessary work.

[m4rvr]

Thanks for the confirmation! :)