currently I am working on JS animation for MFD tablet. Right now I am recieving perfomance issues. I write small script for animation, and it runs ok. But as soon as I touch the screen its starts lsgging. You can see the whole code here
<html>
<head>
<title>JS SpeedTest</title>
</head>
<style>
.row, .row1 {
display: flex;
}
.row1 {
margin-top: 20px;
}
.block {
background: black;
width: 30%;
height: 50px;
margin: 5px;
}
</style>
<body>
<div class="row">
<div class="block" style="background: red;"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="row1">
<div class="block" style="background: red;"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
<script>
(() => {
function* step() {
let back = false;
let n = 0;
while (true) {
if (n >= 200) {
back = true;
}
if (n <= -200) {
back = false;
}
yield back ? n-- : n++
}
}
Array.prototype.forEach.call(
document.getElementsByClassName('row'),
function(el) {
const nextStep = step();
setInterval(
() => {
Array.prototype.forEach.call(
el.getElementsByClassName('block'),
(b, index) => {
b.style.transform = `translate(${nextStep.next().value}px, 0px)`;
});
},
20
);
});
Array.prototype.forEach.call(
document.getElementsByClassName('row1'),
function(el) {
const nextStep = step();
setInterval(
() => {
Array.prototype.forEach.call(
el.getElementsByClassName('block'),
(b, index) => {
const val = nextStep.next().value;
b.style.transform = `translate(${val}px, 0px) scale(${val / 100})`;
});
},
20
);
});
})();
</script>
</html>
also you can see the behaviour on the video https://drive.google.com/file/d/1DUrc1N9ZvYxOsnUgnEVQKh7ZRFVrtTPu/view?usp=sharing
any thoughts on how I can improve performance ?