Kevin Powell - Community•16mo ago

First Iteration Glitch?

Would you happen to know why the first iteration doesn't get the transition class? https://gyazo.com/f1dd87e6efb7ed42bd914f6489919df8

let blob = document.querySelector(".blob");
let position = blob.getBoundingClientRect();

let x = position.x;
let y = position.y;

function randomX(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomY(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function newPosition () {
    let newX = randomX(x, (screen.width - 500)) + "px";
    let newY = randomX(y, (screen.height - 500)) + "px";
    blob.classList.add('blobTransition');
    blob.style.left = newX;
    blob.style.top = newY;
    console.log("success");
}

setInterval(newPosition, 1000);

let blob = document.querySelector(".blob");
let position = blob.getBoundingClientRect();

let x = position.x;
let y = position.y;

function randomX(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomY(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function newPosition () {
    let newX = randomX(x, (screen.width - 500)) + "px";
    let newY = randomX(y, (screen.height - 500)) + "px";
    blob.classList.add('blobTransition');
    blob.style.left = newX;
    blob.style.top = newY;
    console.log("success");
}

setInterval(newPosition, 1000);

Gyazo

Gyazo Screen Video

1 Reply

Gashy•16mo ago

Try calling new position straight away, because before that your blob wont have anything until after 1 second

Gaming

Programming

First Iteration Glitch?