JS ⟩ browser ⟩ animation ⟩ example ⟩ moving cat
keep moving an image by updating its .style.left property.
const {log} = console;
const {cos} = Math;
// ⭐️ import
import { $ } from './js/ext/Node_ext.js'; // Node extension
// --------------------------------------------------------------------
let cat = $("img");
let angle = Math.PI / 2;
// ⭐️ 1. request first frame
requestAnimationFrame(animate);
// render loop
// - t1: current timestamp (in ms)
// - t0: last timestamp
function animate(t1, t0) {
if (!t0) t0 = t1;
// ⭐️ 2. update animation
angle += (t1 - t0) * 0.001; // 1/sec = 57.3 °/sec
cat.style.left = cos(angle) * 100 + "px";
// ⭐️ 3. request next frame
requestAnimationFrame(t2 => animate(t2, t1));
}