Home/ Questions/Q 6615371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:27:13+00:00

I have found some articles on using request animation frames for animating html5 canvas

  • 0

I have found some articles on using request animation frames for animating html5 canvas elements. http://paulirish.com/2011/requestanimationframe-for-smart-animating/

If I were to have multiple elements, should I have a timing system for each of them individually (a separate script) or should I have them all within a single loop?

This is for a magazine concept, wherein you may have each ‘page’ with a different animation (one a series of lines, another a wave, perhaps another that disintegrates an image before your eyes as you read the text)

any help is always appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume that you will develop each animations separately, and further these animations are not related with each other. In such case you not at all need for synchronization… If you go for sync them up in one loop, you will have following problems…

    • If animation in one canvas is slow, animation in other canvas will have to unnecessarily wait…
    • requestAnimationFrame help you create intelligent loop, ie if your canvas in hidden or your tab is not active, callback will not occur for canvas. In case of syncing, you will not be able to optimize fully.
      • It will be more complex to manage all the animation in one loop rather then individual loop.
    • While debugging, you may come across problems caused by other animations in the page…

    So if your animations are not related, I highly recommend not to sync the animations with one loop. Hope this answers your questions.

    Following link will help you learn more about Html5 Canvas…

    • 0