Both boxes must spin simultaneously. Example:
let deg = 0;
function spin(el) { deg = (deg + 1) % 360; el.style.transform = `rotate(${deg}deg)`; requestAnimationFrame(() => spin(el)); }
const boxA = document.createElement('div'), boxB = document.createElement('div');
document.body.append(boxA, boxB);
spin(boxA);
spin(boxB);
hey, seems both spins share the same counter so they conflict. using a unique degree variable for each box shud let them rotate indpendently. hope that helps!
The problem arises from sharing a single degree counter, making both elements reference the same value during their animation loop. In my experience, transferring the degree variable inside the spin function or defining a dedicated degree for each element effectively resolves the issue. This ensures that each element maintains its own rotation state independent of the other. This modification not only simplifies debugging but also allows for more flexible animation behaviors.