let pf = document.querySelectorAll('.pf');
for (let i of pf) {
Object.assign(i.style, {
left: '400px'
})
}
function shiftLetters() {
let start = performance.now();
let dist = -400;
let dur = 500;
const logoAnimate = (timestamp) => {
var runtime = timestamp - start
var progress = Math.min(runtime / dur, 1)
const position = progress * dist;
if (runtime < dur) {
for (let i = 0; i < pf.length; i++) {
(function(i) {
setTimeout(function() {
pf[i].style.transform = `translate3d(${position}px,0,0)`
}, 100 * i)
})(i);
}
requestAnimationFrame(logoAnimate)
}
}
requestAnimationFrame(logoAnimate)
}
document.getElementsByTagName('button')[0].addEventListener('click', shiftLetters);#wrapper {
display: flex;
position: absolute;
-webkit-transform: translate(-50%, 10%);
transform: translate(-50%, 10%);
top: 50%;
left: 50%;
}
.pf {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
margin: 2px;
background-color: red;
}
button {
display: block;
margin-top: 50px;
}<div id="wrapper">
<div class="pf"></div>
<div class="pf"></div>
<div class="pf"></div>
<div class="pf"></div>
</div>
<button>animate</button>Upon clicking the button, I have a set of 4 elements that are supposed to move exactly to the distance specified by the variable "dist" (-400px). However, they end up at random integer positions instead of the intended -400px. I suspect it may be a simple fix related to scope or variable declaration.