Using requestAnimationFrame inside of window.onload{}

Coding Help
1

Hello everyone, I am trying to use requestAnimationFrame on my site.
Here’s a block of code:

window.onload = function() {

var alias = globalThis.alias;
const oF = function() {
  for (var i = 0; i < alias.length; i++) {
    alias[i].rotate(10);
    alias[i].scale(0.9);
    alias[i].position.y += 2;
    if (alias[i].bounds.width <= 3 || alias[i].bounds.height <= 3) {
      alias[i].remove();
      //alias[i]=undefined;
    }
  }
};


};

requestAnimationFrame(oF);
//setInterval(oF, 33)

Previously I used setInterval to run the animation. Although it worked fine, we all know that using requestAnimationFrame is better. So I rewrote the line into
requestAnimationFrame(oF)
However, this immediately threw an error, saying something along the lines of alias is not defined. After some thinking, I concluded that this was happening because globalThis.alias is not immediately available - it worked previously in a setInterval function because the 33 milliseconds allowed time for globalThis.alias to become defined.
I tried adding window.onload functions, but it makes an error because variables inside of functions become function-scoped and can’t be used elsewhere. Any ideas on how to fix this?

2

I know nothing about requestAnimationFrame, but could you just quick-exit the function if alias isn’t ready yet, like:

const oF = function() {
  if (!alias) return;
  for (var i = 0; i < alias.length; i++) {
  ...
1 Like
3

Sadly it doesn’t work…thanks for helping though.